Drupal Theming: Adding Font Awesome Icons to Menu Items

I'm currently working on a Drupal build where I'd like users to be able to easily add icons to menu items through the UI. Enter FontAwesome, the scalable vector icon font that leverages the power of CSS. That in combo with the infamous Menu Attributes module allows users to add custom classes to Drupal menu items via the Menu edit interface on a per menu item basis. This is ideal for what we need to accomplish.

Install Menu Attributes

First, grab the Menu Attributes module and enable it either via Drush or download and enable it via the modules admin page. Once you enable Menu Attributes, visit /admin/structure/menu/settings and be sure that the "Classes" attribute is enabled. Now, you'll see this as a text field for any given menu item when editing those.

Get Font Awesome

Now, we need to add Font Awesome and for the sake of this tutorial, I'll use the CDN version which we can add to our theme using a preprocess function. As aways, unless you're building a custom module, add the preprocess function to your theme's template.php file or create one if you don't have one already. For my preprocess function, I can use hook_page_build with drupal_add_css.

function MYTHEME_framework_page_build(&$vars) {
// Add font awesome cdn.
drupal_add_css('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array('type' => 'external'));}

Be sure to replace MYTHEME with the actual machine_name of your theme and clear cache. If all went well, you'll now have Font awesome available to use. Note, you can also download Font Awesome and self-host it as an alternative to the CDN version.

Add the Icon Classes

The next step is to add some icon classes to your menu items via the Menu Attributes classes field. To see what icons are available to you, refer to the Font Awesome "Cheat Sheet" on their site. I'll add a "home" icon next to my home link so I simply edit the home link and add this to the classes field typically located at /admin/structure/menu/manage/main-menu:

fa fa<span style="color: #339933;">-</span>home

Style away

Above, the first fa instantiates Font Awesome and fa-home selects your icon. This will need a bit of theming and I found a few caveats as well. Since the class is added to your menu's "a" link, you'll want to define your font for the menu link itself and for the icon which gets added via a CSS "before" class. So if your menu id is primary-nav, you can do this:

#primary-nav a.fa { font-family: arial, sans-serif;}

#primary-nav a.fa:before { margin-right: 1em;
font-family: FontAwesome;}

One issue I ran in to was that Firefox had trouble rendering the icons from the CDN and it's a documented issue apparently. To solve this, you may need to define Font Awesome in your theme's CSS via the @font-face attribute with an absolute path to the CDN -- that solved it for me. Beyond this, you can style and color as needed all the while using CSS. That's pretty much all you need to do so as you can see it makes it trivial for users to add their own icons to menus.