Social Icons CSS Customization

vlogazul · Member · Feb 29, 2016 at 1:58 am
Copy link

Add topic to favorites
I am using the Triton Lite theme and I would like to know if there’s a snippet for the following.

If you click on my most recent post, you will see the social media icons on the right side of the widget section. Is there a snippet to put those media icons in the navigation bar? Next to the last category section in the menu bar and for those icon to align with the text, and if so also to change the color of those icons to the same color of the text of the navigation bar instead of the gray. Thanks

The blog I need help with is: (visible only to logged in users)
slfrsn · Member · Feb 29, 2016 at 6:05 am
Copy link
You might be able to get away with assigning the social media icon’s class to a menu item.

1. In Customize > Menus, add a Custom Link for Facebook in your menu
2. Click on the menu item after you’ve added it and in the CSS Classes field put ‘genericon genericon-facebook’
3. Clear out the Navigation Label field so it’s blank (otherwise you’ll end up with ‘Facebook’ written out beside the Facebook logo)

That should give you a Facebook icon in your navigation bar. It worked for me when I was playing around with your DOM in the browser’s developer tools, but try it out and let us know if it works for you.
slfrsn · Member · Feb 29, 2016 at 6:07 am
Copy link
I should note that if that does work, you can find a full list of the Genericons library here. Click on the icon you want and it will give you the CSS class to use in place of ‘genericon-facebook’.
vlogazul · Member · Feb 29, 2016 at 7:30 am
Copy link
I tried it as you told me, I followed every step on the way and indeed I was able to create the link but the logo didn’t appear, only the link that took me to the social media page.
slfrsn · Member · Feb 29, 2016 at 6:04 pm
Copy link
Do you have a Premium plan? Or access to the CSS editor in the customizer?

If so we can get a bit more creative. Follow the steps I originally sent you, but in the CSS classes put ‘genericon genericon-custom-facebook’.

Add this to your CSS editor…
```
.genericon-custom-facebook a::after {
    content: "f203";
    color: #fff;
}
```
That basically recreates the Genericon class for Facebook but assigns it to the menu link, and not the menu list item. You’ll need to do this for each icon you’d like to use. Twitter, for example…
```
.genericon-custom-twitter a::after {
    content: 'f202';
    color: #fff;
}
```
Note that it’s the content property that changes. If you visit the Genericons library, click on the icon you want, and then click Copy CSS, it will show you what you need to put there.

However, there’s a catch to this. The Genericons font library is only loaded if it’s actually being called on a page. So while this approach will work on a blog post (because the social sharing buttons use the Genericons font), it won’t work on your homepage. I’d recommend adding a social icons widget to your footer to make sure these icons are loaded on every page.

No items found.