How to Add Font Awesome Icons to Menu Links

by Last Updated: Oct 17, 2023Blog, Divi theme, WordPress Tips

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).


Enable CSS classes for menu items


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:


Font Awesome Icons for Menu Links


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 or my tutorial on how to make WordPress menu links open in a new tab.

5 Free WordPress Plugins You Should Use

Banner - Author Box for Divi Plugin


Author: Andrej

WordPress expert. Divi user since 2014. I blog about WordPress and Divi, my favorite WordPress theme. When I’m not working with WordPress or writing an article for this blog, I’m probably learning Italian. You can read more about me here.