Adding icon fonts to WordPress menus

Header menu of ciaobambino.com with font icon
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.

Adding CSS classes to WordPress menus

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

Adding HTML to a WordPress menu itemIf 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!

6 thoughts on “Adding icon fonts to WordPress menus

  1. Never know that wordpress menu accepts HTML markup too. Actually I thought about adding a animation to menu item on hover.

    Regarding this new theme, you’ve worked well on typography. It’s well between 50-75 chars per line length.

  2. My cousin encouraged I’d personally probably such as this web site. This individual ended up being fully suitable. This organize genuinely built my personal time. You can’t envision basically what sort of lot time period I had put together used for this facts! Thanks a lot!

  3. I tend to write a Custom Walker where I output the description, like:

    $item_output .= '<a'. $attributes .'><i class="fa fa-' . $description . '"></i> </a>';

    Then the user only needs to input the actual name of the icon without the “fa fa-“. Especially given the fact that the author of Font Awesome already once completely changed the notation, this might be more future-proof (hopefully).

  4. Well I had HTML in my menu labels but it seems that WordPress CMS update has removed this “feature”. Oh well your other method still stands.

  5. Hello Morten.. I am a newbie to WP.. I tried adding icons using Font Awesome on my Menu (wamp website).. All is working fine except that the Title attribute is not working and I am getting the weird TITLE kind of display. I have added the title attribute appropriately but to no avail. Is there something that I am doing wrong.

    One more question. Is it not a good idea to use plugin for the above exercise? Does a plugin slow down the site considerably?

Comments are closed.