- This topic has 13 replies, 5 voices, and was last updated 1 year ago by Leo.
October 7, 2020 at 11:15 am #1477133Timea
How do I add a social media icon to the navigation bar? Thank you.October 7, 2020 at 11:32 am #1477165LeoStaffCustomer Support
This is the easiest solution:
https://docs.generatepress.com/article/adding-icons-to-menu-items/October 7, 2020 at 12:50 pm #1477327Timea
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?October 7, 2020 at 7:42 pm #1477676LeoStaffCustomer SupportOctober 8, 2020 at 5:29 am #1478313Timea
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.October 8, 2020 at 6:27 am #1478388DavidStaffCustomer SupportOctober 8, 2020 at 11:04 am #1479011Timea
Thanks for checking, please see the link in the private section.October 8, 2020 at 4:33 pm #1479378ElvinStaffCustomer Support
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?"October 9, 2020 at 5:24 am #1480202Timea
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.October 9, 2020 at 10:00 am #1480787TomLead DeveloperLead Developer
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:
Of course, it would be better to load the latest version of Font Awesome and continue using
fab fa-linkedin.October 10, 2020 at 7:04 am #1481920Timea
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.October 10, 2020 at 7:23 pm #1482692LeoStaffCustomer SupportOctober 11, 2020 at 5:32 am #1483145Timea
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!October 11, 2020 at 7:48 am #1483347
- You must be logged in to reply to this topic.