Skip to content Skip to navigation

Styling on Sites: Awesome Icons using Font Awesome

This is the fourth post in my series, Styling on Sites. In my last post we looked at the new responsive theme Open Framework, and how we can use Bootswatch subthemes to quickly style our Sites site. Today, I'm going to share something awesome. Font Awesome.

What is Font Awesome?

Font Awesome is built-in to Open Framework theme. It provides a set of web-friendly, vector icons through the inclusion of a custom webfont. By using a particular html markup, you can add these icons to your Stanford Sites website. The code looks like so:

<i class="icon-home"></i>

Which gives you an icon like this:

You can increase the size of your icons by adding additional classes, such as:  icon-large (33% increase), icon-2x, icon-3x, or icon-4x.

Which results in:

How can we use Font Awesome in our Drupal sites?

Anywhere you are allowed to use Full HTML you can place this code. You can also consider editing your available text formats to allow for the "i" tag (and classes added to it) to the WYSIWYG that you use regularly. Do this by visiting: Configuration > Content Authoring > Text Formats. Edit the text format of your choosing (Content editor ideally) to add the "i" tag to the WYSIWYG Filter settings at the bottom (add: i[class]).

A note: Drupal does not allow you to have HTML code in your menu items. You might be very tempted to add these icons to your menu items, but unfortunately this is not possible. You can however add this code to a views re-write (e.g. you could add a video icon next to a "watch video" link underneath each post), and to any block or node content body.

Want Font Awesome in Photoshop?

If you are working on your web design in Photoshop or Illustration, you can very easily install the font locally on your computer, and refer to the Font Awesome Cheat Sheet to get the character codes.

Some Examples

Here are just a few examples of how you might use Font Awesome:

Watch Video

Download

Menu

Next

What's great about this technique is that you can target the "i" tag in your CSS independently of the rest of the font, link, or button. For example: a i { font-size: 1.2em; opacity: 0.8; } will get you a slightly larger icon (than the rest of the link text), and lighten the color of the icon using opacity. You can go a lot further with this as well, specifying any CSS properties that you normally would using a regular font.

And that's why Font Awesome is awesome. Enjoy!

Categories: 

Comments

Thanks. this is awesome article.
Font Awesome is simply awesome!

Nice article, but your link to the cheat sheet points to the v4 copy, which tripped me up.

Thanks for catching that. Updated the links to point to the older documentation.

Interestingly we just downloaded the font-awesome library and there are no classes with the icon- preceding them. For instance the twitter class is: fa-twitter or fa-twitter-square.

Yes Virginia, there is a way to use FontAwesone icons in menu items! You may want to update the relevant sentence in the article. Link: http://dannyenglander.com/blog/drupal-theming-adding-font-awesome-icons-... (Solves problems encountered with other tutorials, e.g. the #1 YouTube result for "fontawesome drupal")