How to Add Font Awesome Icons to Menu Links
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 or my tutorial on how to make WordPress menu links open in a new tab.
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.