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: