How: add new social icon (XING.com)?

Developing with Concrete
1

Hi,
is there a way to add new social icons to 9.13? I would like to have XING as well.

Olaf

2

Hi @ong - not sure about adding new icons, but a quick and dirty way to get where you need to go can be to add a social icon using an icon that you don’t intend to use on your site (in my example, I’m using vkontakte) and then use CSS to swap out the “content” value to the xing value like so:

i.fab.fa-vk:before {
   content: "\f168" !important;
}
1 Like
3

Hi @EvanCooper,
it took me a while to respond and I like your solution - even though there should be a way in Concrete itself to add new icons.
Olaf

4

Hi,
as this seems to be a temporary solution only, I took a look at the concretecms code itself.
There is only ONE line to add to ONE file and one can use XING (or many other).
To add a social link open the file: \concrete\src\Sharing\SocialNetwork\ServiceList.php
Search for the function (beginning of file): protected static function getServices()
Search for: [‘phone’, ‘Phone’, ‘fa fa-phone-square’],
Add this after (or in a new line): [‘xing’, ‘XING’, ‘fab fa-xing’],
Done.
Now you just need to set up the new social linke (xing in this example) in the social-settings and you can add it to your page.

Of course, when you update your concretecms this change is lost. Thus you could add this file to the \application\src folder. I will also suggest that the team makes it possible to add new social links via the dashboard.

Olaf

5

Hi,
actually I changed my doing:
I removed all Concrete base social icons from my page and added a new block to the footer area (where I wanted the icon(s) to show up).

<p>Social: <a href="https://www.linkedin.com/in/YOUR_PROFILE/" title="YOUR_NAME on LinkedIn"><i class="fab fa-linkedin"></i> LinkedIn</a>, <a href="https://www.xing.com/profile/YOUR_PROFILE/cv" title=YOUR_NAME on Xing"><i class="fab fa-xing"></i> Xing</a></p>

In my opinion that’s a much better approach.
Olaf

1 Like