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!
Andres Paz Soldan says
Works like a charm. Thank you!
Anne S. Katzeff says
These instructions are so clear and simple, and work perfectly! Thank you!
Laura Hartwig says
Thanks for the feedback!
Marco says
Hi!
Change the line in functions.php to:
wp_enqueue_style( ‘font-awesome’, ‘//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css’ );
It solved the problem with the version (4.2.0) and you have always the new icons 😉
Laura Hartwig says
Thanks for letting us know this great tip!
Peter says
Worked perfectly, thank you!
David says
Hi!
If you use the free plugin Font Awesome 4 Menus and then add the line that you used for the navigation label: (which, btw was exactly what I was looking for), then you don’t need to edit the CSS, and it works like a charm!
Laura Hartwig says
Great tip! Thanks for sharing!