Archived topic
Step by step for adding social icons to nav bar.
9 replies · Started by Broc on November 25, 2018
Is there a step-by-step guide to add social media icons to the header nav bar? I found the documentation on hooks, but it's extremely vague and I can't figure out what I need to do. Here is an example of what I am trying to accomplish. Thanks. https://gtown.flywheelsites.com
Hi there,
This should be what you are looking for:
https://docs.generatepress.com/article/adding-icons-to-menu-items/
I followed the steps, but I am not seeing the facebook icon. It is showing something else. Please see attached pictures.
https://i.imgur.com/LPcFdBg.png
https://i.imgur.com/Dz4fkOH.png
https://i.imgur.com/19OY1FR.jpg
Hi there,
thats Font Awesome 5.0 icon - and it looks like you are using 4.7 - so try the icons from this library:
I was using <i class="fab fa-facebook"></i>.
What I needed to type was <i class="fa fa-facebook" aria-hidden="true"></i>. That worked. Thanks for the reply. Is there a way to change the background color on the icons?
So try step #1 here:
https://docs.generatepress.com/article/adding-buttons-navigation/
Then replace the CSS in step #2 with this:
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
}
}That changed the background color, but the icon is no longer floating right. How can I put it back on the right side? Thanks.
You can add multiple classes to the menu item separated by a space:
nav-button menu-item-float-right
Awesome! Thanks.
No problem :)
