Using Font Awesome icons in CSS

• Tom Rishworth's blog

The standard way to use it is to just place a bit of markup in your code, where you need the icon to be  e.g <i class="fa fa-check"></i>

But, when working on Drupal projects, sometimes its not particularly easy adjusting the markup that it provides.

On a recent job I needed to add icons next to the menu links.

By default, Drupal does not allow html in menu links. There is a contrib module that can override this, but thats a lot of extra overhead. The easiest way to do this is with CSS.

To start, we need to get the unicode of the font we want. To get this, go to the page of the font you require e.g http://fortawesome.github.io/Font-Awesome/icon/arrow-circle-o-right/

Then copy the unicode text (this starts with an f)

The CSS

We’ll use the :before pseudo class to place the font where we want it.

First I’ll add some css(sass) to apply to all menu items.

li{
  position: relative;
  a{
    padding-left: 20px; //Make some room for the icon
    &:before{
      font-family: FontAwesome;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}

You may need to adjust the left and top values to position the icon correctly.

Next we’ll target the individual menu items to add the icons, using the the “content” property. Note that we have to add the “\” symbol before the unicode.

a.pitch:before{
  content: '\f00b'; 
}
 
a.insight:before{
  content: '\f05b'; 
}

If you would like to just show the icon, and hide the anchor text, you can use the Font Size property to do this, like so...

a{
  font-size: 0;
  &:before{
    font-size: 20px;
  }
}