Use Icons Instead of Text in Your WordPress Menu with Font Awesome

First Choose to use the Plugin or Just a Little Script

First, if you don’t already know about Font Awesome, you should really check it out. It makes it super simple to use great icons on your site that scale to whatever size you need. I did a quick post about using a plugin to use them a while ago.

But, if you don’t want to use a plugin, and just want to add a little bit of code to your site and be on your way, here is a great article that covers all you need to know: http://avgjoegeek.net/add-font-awesome-genesis-theme/

The main gist of it is that you need to add some code to your functions.php file. If you’re using Genesis and already have a Enqueue Scripts area, it’s as easy as adding this one extra line:

wp_enqueue_style( 'prefix-font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css', array(), '6.1.1' );

If you want to use a newer version, check here for the latest css file link: https://cdnjs.com/libraries/font-awesome

The article also details how to use it once it’s installed. Basically, you call the icon by using a “i” with the class “fa” and then the name of the icon you want to use (which can be found on the Font Awesome page). Like this:

Using Icons Only in the Menu

So, on a recent site, I wanted to add social media icons right in with the menu. Here’s the look I was going for:

As you can see, I wanted the rest of my menu to be regular text, but at the end, I wanted to EASILY add some social media icons – with NO text.

I added the Enqueue script to my functions.php file as stated above. Then I simply went to my menu and created two new links as external links and added the text as the navigation label, like this:

Then I added this little bit of CSS to my style.css file:

/* Social Media menu items */
#menu-item-5200 a,
#menu-item-5201 a  {font-family: FontAwesome;}

I found out the menu items numbers by simply doing an inspect element.

Using Icons WITH Text in the Menu

If you’d rather use the icons WITH the text, here’s great post explaining how to use Font Awesome icons with your menu items:
https://sridharkatakam.com/using-font-awesome-wordpress/

Please let me know if this helped you use Font Awesome Icons!