social media icons on top menu

Hi there,

You could use the following custom CSS to convert the Instagram and Facebook links in your primary menu to icons:

.main-navigation ul li a[href*="instagram"], 
.main-navigation ul li a[href*="facebook"] {
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 0;
}

.main-navigation ul li a[href*="instagram"]:before,
.main-navigation ul li a[href*="facebook"]:before {
    font-size: 20px;
}

.main-navigation ul li a[href*="instagram"]:before {
    content: "\f16d";
}

.main-navigation ul li a[href*="facebook"]:before {
    content: "\f230";
}

Give that a go and let us know if extra questions come up. ??

Wouv, that’s great, done in seconds :)) Thank you so much!

Woo hoo! ??

Hi Siobhan once again,
Sorry, I think I messed sth up and now the icons are replaced with vertical bars ?? Instead of using a plugin, I tried doing the same for the social media icons down below the page on the widget-area by adding custom html on the footer widget and then using your script for the widget-area. What am I missing?

FontAwesome was used to display the icons in the menu, and that requires that font to be loaded with your theme.

It sounds like the font was previously being loaded along with a third-party plugin, which you’ve recently disabled.

If you don’t want to install the plugin again, you could browse for a different plugin in the repository to load FontAwesome. This one, for example, has good ratings:

https://www.ads-software.com/plugins/wp-font-awesome/

Hi there,
I didn’t want to use any other font but the script didn’t work in anything else. So, yes, when i installed the font plugin, it’s ok, working.
Thanks.

Glad it’s working now!