[Resolved] Social media icon in the navigation bar

[Timea]

Hello,

How do I add a social media icon to the navigation bar? Thank you.

[Leo]

Hi there,

This is the easiest solution:
https://docs.generatepress.com/article/adding-icons-to-menu-items/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Timea]

Hello,

I tried adding it manually from the Custom links. I’ve copied the URL, the navigation label and CSS too but it doesn’t appear on my menu. Am I missing something?

[Leo]

Are you using the fa method?

If so make sure you install and activate the FA plugin:
https://wordpress.org/plugins/font-awesome/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Timea]

Yes, I’m using the FA method. I installed the plugin and it shows in the navigation bar but I tried for Home page, Linkedin etc and it’s all the same icon. It doesn’t include the FA icons. And also when I click on it, it goes out from my site, I wanted to open it in a new page.

[David]

Hi there,

can you share a link to your site so we can see what the issue is

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Timea]

Hi,
Thanks for checking, please see the link in the private section.

[Elvin]

Hi,

I’ve read through the scripts on your site and it doesn’t seem to be properly importing the icons. It’s importing from a locally hosted url.

Also, it seems pretty outdated (4.7.0). Are you using the plugin now?

Can you try removing the previous one you’ve added and use the latest version of the FontAwesome plugin?

The newest version is using 5.15.1 and should also include the proper import styles and prefetch headers.

After applying all this, please purge the site and browser cache and let us know what you see.

A wise man once said:
"Have you cleared your cache?"

[Timea]

Hi,

Thanks for checking.

I tried with and without installing the plugin too. I’ve deleted and re-installed the Better FontAwesome (which seems to be the latest version).
I cleared up the browser cache.

The icon is still the same, it’s showing up but not with the selected icon.

[Tom]

Hi there,

You’re loading Font Awesome 4.7.0: <link rel='stylesheet' id='bfa-font-awesome-css' href='//cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css?ver=4.7.0' media='all' />

However, the icon in your menu is using fab, which is for Font Awesome 5.x: https://www.screencast.com/t/6WK9Re7l

If you want to use 4.7.0, you need to do this: fa fa-linkedin

Of course, it would be better to load the latest version of Font Awesome and continue using fab fa-linkedin.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Timea]

Hello,

Many thanks for your assistance, i changed from fab to fa and it finally the icon shows up!

As per your suggestion, I would prefer to load the latest version.

Could you please send a link to the plugin?

As the one I used, seemed to be the latest, at least I couldn’t find more updated version. I used Better Font Awesome from Mickey Kay.

To get rid of older version references, I reckon I would just need to delete the plugin.

[Leo]

This is the official FA plugin so it should load the latest version:
https://wordpress.org/plugins/font-awesome/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Timea]

Thanks for that, I’ve been installing another version that seemed to be the latest one.
But I tried the one you sent and it worked.
Thanks a lot for all the support from the team!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts