Use Icons Instead of Text in Your WordPress Menu with Font Awesome : 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.

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',
'', array(), '4.7.0' );

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:

<i class="fa fa-facebook"></i></i>

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.