All Themes: Add Font Awesome Icons to menus
All of our themes integrate the Font Awesome 5 Free library for icons. This means you can use any available Font Awesome icon within your theme, including in menus.
The icon library is extensive, and includes many symbols and brand logos. Browse the full library here, and be sure to toggle through the tabs to see currently available icons:
TO ADD AN ICON TO A MENU
1. Start by going to Appearance > Customize > Menus from your WordPress Dashboard. Navigate to the menu you plan on adding the icon to. This will make it easier to edit as we build the icon HTML! In the example below, we're going to target the "SHOP" link that's in the primary menu, underneath our logo:
- If you have not yet established the menu you wish to add the customized icon to, please read our article on building and assigning menus to locations.
2. Next, open a new tab or browser window. Then, search the Font Awesome Free library for the icon you want to use, and click on the icon. In the example below, we're searching for a shopping bag icon to add next to the "SHOP" link shown above.
3. Look for the HTML for your chosen icon, which in this example, is highlighted in teal. (The color your icon HTML is highlighted with will match the color of the icon on the page.) Click to copy the HTML.
4. Now, head back to your browser or tab with the Customizer open to the menu you're editing. Paste in the icon HTML into the Navigation Label field. If you already have a label typed into the field, paste the HTML in front of it:
Here's a closer look at how the Navigation Label should now read:
5. To adjust the space between your icon and the menu label, try adding a space in front of the text. But, if you wish to add more space, add the following code after the closing class="" HTML code:
style="margin-right: 5px;"
In full, an example of the pasted HTML would be:
<i class="fas fa-shopping-bag" style="margin-right: 5px;"></i> Shop
- Don't forget, the "fas fa-shopping-bag" code up above will be replaced with your own Font Awesome icon code!
Adjust the margin-right property of 5px up or down to increase or decrease the amount of space. Here's how this looks in action:
6. If you wish to feature an icon within a menu, but no other text next to it, delete the word/label after the HTML. In our example, if we ONLY want to feature the shopping bag icon but not the word "Shop," we'd simply delete it:
This is a great tip to keep in mind if you wish to add icons to Top Left or Top Right menus in our themes.
7. When you're happy with your icon addition, be sure to Publish your changes in the WordPress Customizer. You may need to refresh your browser in order to see your menu changes live!