Curious how to add inline icons to WordPress navigation menus?
It’s easier than you might think.
I’ll share exactly how to add icons next to navigation menu items in WordPress using Font Awesome, an icon font set consisting of scalable vector icons that can be used to place icons inline (i.e. right next to and in the same row) to your navigation menu titles.
Adding icons to WordPress navigation menus with a plugin is clearly the easiest way to get to end of job, and is the route I use to place icons inline to WordPress navigation menus in premium WordPress themes by StudioPress.
Why Use Font Awesome for WordPress Navigation Menus?
In essence, Font Awesome is a instantly CSS customizable font set of scalable vector icons.
While you’ve got other options, including dashicons, which is already included in WordPress, I like Font Awesome because it gives you a simple way to make icons appear inline to navigation menu titles rather than above – for dashicons, which appear on top of your navigation menu title instead of inline, check out Brad Potter’s dashicons tutorial for StudioPress Genesis Framework navigation menus.
In addition to giving you inline navigation menu icons, Font Awesome is packed with feature / function.
- 500+ icons in a single collection, giving you an icon-based language to write in
- Infinite scalability makes each vector-based icon graphic look good at any size on all displays, including high-resolution retina displays.
- Free (even for commercial use), that’s always nice
- Style, icon color, size, shadow, and anything possible with CSS you can do with Font Awesome
- Originally designed for Bootstrap, solid compatibility with all frameworks
- Screen reader compatible
- Desktop edition available (use it in Microsoft Word if you want)
It wasn’t all that long ago when Font Awesome was banned from the WordPress Plugin Directory, but in May 2013, WordPress lifted the ban following open source and GPL related licensing changes by Font Awesome.
3 Steps to Add Font Awesome Icons to Genesis Menus
It’s relatively simple to incorporate Font Awesome into your theme’s navigation menus, here are the 3 easy steps to make it happen.
2. Enable CSS Classes screen option in Appearance > Menus
3. Enter a CSS Class for the icon you want
Step 1: Install Font Awesome 4 Menus Plugin
Because the plugin is in the WordPress Plugin Directory, simply navigate over to Plugins > Add New within your WordPress Dashboard navigation, search for “Font Awesome 4 Menus”, install and activate the plugin – there are no settings or the like to adjust, cruise right over to step 2.
Step 2: Enable CSS Classes screen option in Appearance > Menus
By default, WordPress ships with a number of menu visibility options disabled, in this step, you’ll enable one of those options so that you can actually see and create a placeholder if you will, for an icon CSS Class name that will eventually render your icons on your navigation menu.
Go to Appearance > Menus within the WordPress Dashboard, click Screen Options near the top right, and check the CSS Classes option. Now you’re cooking with gas and ready to add an icon to your navigation menu in step 3.
Step 3: Enter a CSS Class for the icon you want
In this final sep, you’ll actually tell WordPress what icon you want it to display inline to, and in front of, your navigation menu title.
First, use the Font Awesome Cheatsheet to copy the CSS Class name associated with the icon you want to use (CSS Class names begin with “fa-“).
Back in Appearance > Menus within the WordPress Dashboard, open the Menu Structure for the menu you want to edit, open the navigation menu item you’d like to add an icon to and you’ll now see a “CSS Classes” field. As you might have guessed, you’ll paste the CSS Class name from the Cheatsheet in that field, save your changes, and you should now have an icon inline to your navigation menu title!
Further Reading: Font Awesome
Once you have the basics of Font Awesome nailed, you can start to get creative with things like stacked icons, animated icons, fixed with (stacked) icons, and making icons larger – the Font Awesome team created a list of examples to help.
If you make the investment (of implementation time) into using the Font Awesome 4 Menus Plugin, an incremental step forward you might want to consider is adding the Font Awesome CDN to WordPress without a plugin. This involves editing several files in your WordPress install (Jan Hoek shares how to do this in Add Font Awesome Icons to the Genesis Menus). Is it worth doing? Perhaps if you’re making heavy use of the font, leveraging a content delivery network (CDN), which is global, would be worthwhile from a page load time perspective. Further, if you’re averse to adding yet another plugin to your install for fear of bloat, taking a CDN approach is ideal.