How to change any GeneratePress menu item into a Font Awesome icon
In this tutorial, I will show you how to change a menu item into a Font Awesome icon. This can be used to change a text menu item to an icon, or to add external links to your menu, like a Facebook page link.
For this tutorial I will change the “Home” button to an icon based one.
First, let’s hover over our site title and click on the menu option in the drop-down. Alternatively, while you are in the wp-admin, hover over appearances and click on the menus option
Click on the little arrow on the right of the menu item to see the options.
We, will need the Navigation label field for this to work. Copy and paste the following code in to this field:
<i class=”fa fa-home” aria-hidden=”true”></i>
Let’s save the menu and visit the front page of our website. As you can see our home button is now an icon type item.
Next, let’s create a Facebook icon. For this, you need to chose custom link in the menu editor and after you have added the URL of your Facebook page, simply repeat the process with the navigation label filed. This time, use the Facebook icon:
<i class=”fa fa-facebook” aria-hidden=”true”></i>
(You can find all the font awesome icons at this link http://fontawesome.io/icons/).
