How to Add Font Awesome Icons to Menu Links

In this article, I will guide you on how you can add the Font Awesome icons to your Divi menu links. This method works with any WordPress theme, not just Divi.

My method is to do it with a free plugin called Font Awesome 4 Menus. So just install and activate this plugin on your WordPress website. Then to add a Font Awesome icon to your menu link(s), go to Appearance > Menus in your WP admin panel and add fa-(icon name) as a CSS class of your particular menu link.

NOTE: Before you can add a CSS class to your menu link(s), you will first need to make the CSS classes option show for your menu links. You can do this by clicking on “Screen Options” in the top right corner of your WordPress admin panel. Also, if you don’t have any menu for your website created yet, you will need to create one. And don’t forget to set the “Theme locations” for your menu (e.g. Primary Menu).

 

 

So, for example, if you want a home icon to show next to your “Home“ link in your menu, enter “fa-home“ as a CSS class of your Home menu link. And if you don’t know which name the FontAwesome icons have, just search for them on their website: https://fontawesome.com/icons?d=gallery

 

 

I hope you will find this tutorial helpful. There may be other ways on how to do this, but I wanted to show a quick solution for doing it with a plugin instead of custom coding.

PS: You might also like to check out my other article with some helpful tools that I use on my PC.