UPDATE: For universal solution (non-Genesis) that also adds the icons to the menu-item’s anchor text, see my newer post, How to Add Font Awesome Icons to WordPress Menu Anchor Text.

Using Font Awesome Icons in Genesis Navigation

In one of his tutorials, Genesis developer Brad Potter shows you how to add dashicons to your header navigation in Genesis. I thought this was a pretty cool tutorial and even decided to add some icons to my own navigation. However, I like to use Font Awesome icons so I started modifying some of Brad’s code to use Font Awesome rather than Dashicons. The steps for adding Font Awesome icons are pretty much the same as how Brad shows you but with a few small changes. Here’s what you do:

Add Support for Font Awesome

This code snippet should be added to your child-theme’s functions.php. It enqueues the styling for Font Awesome from an external CDN so you don’t have to host the file on your own server.

//* Add Font Awesome Support
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
	wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}

Add Some CSS for Your Navigation Icons

Add this CSS to your child-themes style.css. You can modify it to your specifications.

.site-header .genesis-nav-menu .menu-item:before {
	display: block;
	font-family: 'FontAwesome';
	font-size: 28px;
	font-style: normal;
	font-weight: normal;
	line-height: 0;
	margin: 0;
	position: relative;
	text-align: center;
	top: 16px;
	padding: 5px 0 7px;
	vertical-align: top;
	transition: color .1s ease-in 0;
	-webkit-transition: color .1s ease-in 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.site-header .genesis-nav-menu .menu-item:before {
	color: #092662;
}

.site-header .genesis-nav-menu .menu-item:hover:before {
	color: #bb153f;
}

.site-header .genesis-nav-menu .current-menu-item:before {
	color: #092662;
}

/** If necessary, add the code below to your media query where your 
breakpoint occurs for your mobile navigation. It removes the icons 
from your mobile menu. **/

.site-header .genesis-nav-menu .menu-item:before { 
	content: none; 
}

Add the Menu Item Classes

Finally, you just need to add the proper Font Awesome icon classes to your menu items. To do this, go to Appearance → Menus and make sure you’ve enabled “CSS Classes” from the Screen Options panel at the top-right corner of the screen. Next, locate the class of the Font Awesome icon you want to use and copy/paste it into the CSS Class field for your menu item. Font Awesome icon classes start with fa- so your class will looks something like: fa-wordpress (if you use the WordPress icon). Save your changes and you’re all set.