How to Add Font Awesome Icons to Menu Links

by | Last Updated: Oct 12, 2016 | Blog, 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: http://fontawesome.io/icons/

 

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.

Bloom Email Opt In Plugin

Disclosure: This website is not owned by Elegant Themes. Some of the links on this website are affiliate links. That means that I will get paid a commission if you use them. This however does not influence my opinions, as I'm personally using these products and am satisfied with them.
Share This