Adding icon fonts to WordPress menus

Several people have asked me how I added the plane icon seen in the image above to the main menu of CiaoBambino.com. Here is a quick breakdown of my method so you can try this for yourself and add some font icon power to your WordPress menus.

Font icons are becoming all the rage for web designers and developers, and with good reason. They allow us to add scaleable vector-based icons to our sites with ease which in turn produce crisp and clear graphics on any screen at any size with minimal effort. And because these icons are fonts you can style their color, shape, and alignment the same way you style your regular text.

Step 1: Get your font icons

First you need some font icons to add to your site. There are several libraries available including the enormous Font Awesome and the more simplistic Genericons. And if you want to create your own custom icons you can use a service like IcoMoon or even roll your own.

A font icon kit consists of a set of common components: The fonts themselves, usually served up in TTF, OTF, and SVG flavors for cross-browser support, and a stylesheet with @font-face rule sets defining when and how the font will be used.

Technically the only thing you need to do to make a font icon kit active on your site is to call its stylesheet, but how exactly this happens depends on your chosen kit. Some like FontAwesome provide a cloud hosted service. Others require you to download the font kit and add it to your theme. In this example I’ll use FontAwesome and the BootStrapCDN option as outlined in the documentation.

To make the icon font active on the site we’ll enqueue it from functions.php in your theme or child theme:

/**
 * Enqueue Font Icon Stylesheet
 */
function yourthemename_iconfonts() {
	wp_enqueue_style( 'FontAwesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' );
}
add_action( 'wp_enqueue_scripts', 'yourthemename_iconfonts' );

This injects the necessary style sheet code into your header file dynamically. The reason you want to enqueue the styles rather than just add them to your header.php file is that you may want to prevent the style from loading on certain pages and this can be done with simple conditional statements within the function above.

Step 2: Trigger an Icon using a style

The creators of these font icon kits have gone out of their way to make adding font icons as easy as possible. This includes providing you with a long list of different methods for adding the icons themselves. In most cases these methods are based on the simple principle of using a class to add a :before pseudo element that has a content declaration with the specific symbol that identifies the icon. If you’re not familiar with CSS that probably sounds like complete gibberish so here is an example of how FontAwesome declares the Twitter icon:

.fa {
	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.fa-twitter:before {
	content: "f099";
}

As you can see the .fa rule defines the FontAwesome font family and how any icon from this family will be presented and the .fa-twitter:before rule specifies the icon to be used. The genius of this method is the use of the :before pseudo class and the content declaration. This ensures that when a text-only browser accesses the content or the font doesn’t work, you won’t end up with some bizarre icon in its place. It’s not part of the content itself but instead added as a decorative element only.

Knowing this it should be clear how you trigger the icon: Simply add .fa and .fa-twitter to whatever element you want the icon to appear in front of and it happens automatically.

This process is easy in WordPress: Go to Appearance -> Menus, clicking on Screen Options in the top right corner, activating the CSS styles option, and adding the classes to the CSS Styles area for the menu item in question.

This adds the icon inline in front of the menu text in question. It also means the icon will not inherit the styling of the menu item (color, hover states, etc) and you may have to add extra styling to make it look like you want it to look in your regular stylesheet.

An alternative method

If you want to add the icon as part of your menu item meaning it is styled and reacts the same as the menu text you can do so using a little known trick: You see the Navigation Label filed in WordPress menus accepts HTML. This means you can add the trigger code for the font icon right into the Navigation Label like this:

This places the icon inside the anchor tag and it becomes part of the active area of the link. Once the icon is added you will have to add some extra styling to your stylesheet to prevent it from jamming up against the text. In my example I added the icon to the right of the text so my custom style rule looks like this:

#access .fa {
	padding: 0 0 0 5px;
}

Your turn

Now that you know how it’s done it’s your turn to try it out on your own site. Like I said font icons are extremely powerful and can be used for all sorts of interesting things. Adding them as inline items in your menus is just one of an infinite number of possibilities. FontAwesome has a long list of examples of different inclusion methods and techniques for adding font icons into your site and more options are thought up every day. Once you see what is possible and realize the power and potential of this technique I’m sure you’ll get addicted. So go try this out for yourself, see how font icons can add some power to your own site, and tell me about the experience in the comments below!