Docs

[instadesign]

This is such a minor issue but it’s bugging me: On this site the correct up-to-date G+ icon displays on the homepage and then certain other pages seemingly at random, but most of the time on other pages the icon reverts to the old version. I’ve cleared cache multiple times, tried switching CloudFlare off, etc… it’s been like this for maybe 6 months now… any ideas?

http://www.thehiphopchipshop.com/

Thanks,

Henry

[Nabeel A]

Hi Henry,

Thanks for writing in! Please disable rocket loader on your site, clear all the cache and reload your site.

Let us know how this goes!

[instadesign]

Hi Nabeel, thanks for your response. I’ve tried doing that multiple times – just tried again – and the problem persists.

[Paul R]

Hi,

You can try adding this in your child theme’s style.css located at wp-content/themes/x-child/style.css

body .x-social-global .x-icon-google-plus-square:before {
    content: "\f0d5" !important;
}

Hope that helps.

[instadesign]

Hi again,

I have tried that (I already had similar code but without the !important) – still no change. In the inspector I can see the CSS is being picked up, it’s the correct character but just seems to be loading the old version of the font… I cannot understand why!

[Thai]

Hi There,

Would you mind providing us with your admin account so we can take a closer look?

Thank you.

[instadesign]

This reply has been marked as private.

[Thai]

Hi There,

I was able to change the google icon, by updated the CSS to:

body .x-social-global .x-icon-google-plus-square:before {
    content: "\f1a0" !important;
}

http://i.imgur.com/7cpzPLe.png

Could you please take a look again?

Thanks.

[instadesign]

Hi, thanks for your reply. I’m a bit confused now… where did you alter that CSS? Just in your inspector? That code, f1a0 is for the Google icon, f0d5 is for the Google+ icon. And in any case, I’m still seeing the old icon on the site.

I’ve just realised something: I don’t think it’s random, I think it’s just on pages where I’ve used CS that the new icon is displaying.

[instadesign]

Update: I’ve just realised it’s a plugin I’m using that’s causing the issue! I have the plugin, “Font Awesome Icons”, installed, in order to display icons in the nav menu. When I disable it, the G+ icon is correct throughout… so this leads me to a new question: how can I get the icons in the nav menu without using a plugin? Thanks!

[Joao]

Hi There,

You can simply paste the icon html code in your label field of your menu items in Appereance > Menus.

You can find all the icons here:

Icons

Inspect the icons by clicking with the right button of your mouse and you will find the icons that have “data-x-icon” which is necessary in order to appear, the icon codes should look like this : <i class="x-icon x-icon-adjust" data-x-icon="" aria-hidden="true"></i>

Thanks

Joao

[instadesign]

Hi, I’m trying this but when I save the menu the  is converted into a ?

[Friech]

Hi There,

Yes it does converted on the back-end, but it should be fine on the front-end when properly applied the data-x-icon.

Please follow this post: https://community.theme.co/forums/topic/using-font-awesome-icons-in-the-navigation-menu/?replyto=1028596#post-1029798

Hope it helps, Cheers!

[instadesign]

Hi, thanks for the response once more but I’m finding your advice confusing, and I’m still stuck with a problem:

1. You say it gets converted properly but that doesn’t appear to be the case, and the post you’re linking would seem to back that up as they are advising to enter the FontAwesome code not just a “”.

2. I’m now following that advice and it works except once I then save the Menu in the back end it reverts to data-x-icon=”” and if I save again it’s then broken on the front end… this is no good as my client needs to be able to update the navigation menu without it breaking.

[Joao]

Hi There,

Your navbar is full of icons, it seems to be working.

Would you mind providing more details about what exactly issue you are facing?

Thanks

Joao

[Author]

Posts