How to Add Font Awesome Icons to WordPress Menus

font-awesomeFont Awesome is an icon font comprised of 369 scalable vectors that can be customized via CSS to change the size, color, add drop shadows, adjust opacity, etc. Though originally designed for Twitter Bootstrap, the font is available for use within any project. These icons have fewer compatibility issues because they don’t require JavaScript. They also look great on retina displays because the font is made up of vectors that can scale to any size.

Earlier this year the Font Awesome icon font wasn’t allowed in the WordPress Plugin Repository due to its licensing. Plugins that loaded the font were closed down. Finally, in May of 2013, WordPress removed the ban on Font Awesome after it updated its license to be open source and GPL-compatible.

Plugin and theme developers are now free to make use of the font in their extensions, provided they don’t load from a CDN. Font Awesome 4 Menus is one of the newer plugins that include the icon font. It replaces an older version that had fewer features. This plugin makes it possible to add icons to WordPress menus without having to adjust any markup or know any CSS. The process is very easy and we can do it in three simple steps.

Step 1: Install Font Awesome 4 Menus Plugin

The Font Awesome 4 Menus plugin loads the icon font on your site so that you can make use of it within your menus and content. Add it to your WordPress site via the Plugins >> Add New menu. There are no settings to adjust for this plugin.

Step 2: Show CSS Classes Options on Menu Screen

When you navigate to Appearance >> Menus and edit individual menu items, you’ll need to make use of the “CSS Classes” option. This can be toggled on using the “Screen Options” menu at the top of the page.

screen-options

Step 3: Enter the CSS Class for the Menu Icon

The last step is to locate the CSS class for the icon you want to use and paste it into the CSS Classes field for the menu item you want to update.

CSS Classes for menu item

 

You can find the CSS class for your icon on the Font Awesome homepage or by using the the cheatsheet. Each is prefixed by “fa-” to differentiate from any other common classes that may already be in use.

Here’s the end result with icons added for each item in the menu:

WordPress Menu with Font Awesome Icons
WordPress Menu with Font Awesome Icons

In addition to adding icons to menus, Font Awesome can also be used in your WordPress content via a shortcode included with this plugin:

[fa class="fa-home"]

The plugin also allows for loading stacked icons, which is a new feature in the most recent Font Awesome 4 release. Here you can see an example of loading multiple icons on top of each other:

[fa-stack][fa class="fa-square-o fa-stack-2x"][fa class="fa-twitter fa-stack-1x"][/fa-stack]

stacked-icons

You can also use plain old HTML within your theme or content to display the icons. However, I’d caution that if you’re wanting to use the icon font heavily throughout your content, you’re much better off not using a plugin. In case someday the plugin is no longer maintained, you’ll be in a better place if you add Font Awesome manually.

The Font Awesome 4 Menus plugin was created by the folks at New Nine and you can check out a live example on their website. The plugin loads one minified stylesheet (18kb) to load the fonts, so you shouldn’t experience a performance hit on desktop or mobile if you opt to use the icon font on your site. I tested it last night and found that it works just as expected. Download Font Awesome 4 Menus for free from the WordPress plugin repository.

21 Comments



  1. Looks good Sarah.

    Perfect for adding interest to your menu and making it easy to pick out the right link.

    Don’t you just love WordPress when you see all the great plugins available.

    Report


  2. wow! really a helpful post. I was looking a post on Font Awesome for WordPress. Thanks Sarah for this nice writing.

    Report


  3. This is excellent news! I’ve been using Font Awesome extensively throughout my website, and had been wondering why updates were keeping so long. My current integration in the nav menu required some custom coding (Genesis is misbehaving), but I’m sure a next update will take care of it.

    Report


  4. Hmm; I wonder if there’s an analogous Plugin for Genericons? I could see that being quite useful…

    Report


  5. The FontAwesome is really beautiful, one thing that concerns (especially when using it in the frontend) is that the font is not anti-aliased on Windows, so the icons are not as sharp as they would be when using images :/

    Report


  6. Nice. Thanks, Sarah. I didn’t realize FontAwesome 4.0 was such an overhaul.

    Report


  7. Hi Sarah

    Thanks so much for your helpful post. You’ve saved me a lot of frustration! Keep up the great work.

    Cheers,
    Olivia.

    Report



  8. If a plugin to add icons to menus requires an entire blog post to explain how to use it, the plugin probably needs more work.

    Report


  9. Thanks for this great post. Now I have Font Awesome-Icons on my Blog :-)

    Report


  10. Not sure why it only works for my submenus in wordpress. The icon appears at the top of the menu and in the middle. Anyone care to shed some light on that?
    By the way Im using the ”the 7 ” wordpress theme.
    Cheers

    Report


  11. How do I suppress the Navigation Link text from showing though? I just want the icon to show…

    Report


    1. i’ve the same question with u.
      i want to show menu icon only without link text.
      may someone can help us ?

      somebody tellme to add this tag : text-indent: -9999px;
      but doesnt works for my web…

      Report


  12. Can I hide the text and just show the icons for my menu?
    Yes. Font Awesome menus adds a space between the icon and the text, and wraps that portion in a span with a class of “fontawesome-text”. To hide the text and just show the icon, you can put .fontawesome-text {display: none;} in your stylesheet.

    Report


  13. where exactly do i put ‘ .fontawesome-text {display: none;}’ in my stylsheet?

    Report


  14. In the WordPress Twenty Fourteen theme one must also click the “Manage Locations” tab, then select your menu from the “Theme Location,” “Top primary menu” then “Save Changes” before the Font Awesome 4 icons will appear.

    Report

Comments are closed.