How to Use Font Awesome

Font Awesome is... well, awesome! It's a great icon-based font that's very commonly paired-up with Bootstrap-based web projects. It has a library of 369 icons—larger than the 200 native Bootstrap 3 glyphicons—and can also unlock unique features like flipped, stacked or rotated icons (and much more).

If you're finding the Glyphicons in Bootstrap 3 a little bit limited, Font Awesome is for you.

Cheat sheet?

Yeah! To use this cheat sheet, simply find the icon you want to use and click the copy button. This will give you the complete HTML Tag, Unicode HTML Entity or CSS rule for that icon to your clipboard, ready to paste into your web development tool of choice.

What is Font Awesome exactly?

Font Awesome is a font that's made up of symbols, icons, or pictograms (whatever you prefer to call them) that you can use in a webpage, just like a font.

Don't know how to set up Font Awesome? Go check out the offical getting started guide, or simply just include this line in your <head> tag:

Icon fonts aren't the only way to implement icons on the web. If you're looking for a explanation of using icon fonts vs. SVG files (another possible method), I'd suggest reading this excellent post by Ian Feather: Ten reasons we switched from an icon font to SVG.

How does it work?

So, how do I add an icon to my webpage? Well, Font Awesome's icons can be used on the web in one of three ways.

This method works by including the rendering of the icon before the content using the :before CSS psuedo-element.

Firstly, the web-font is specified with font-family, and then the icon is specified by using the content property alongside a unicode hex entity (in this case, e021).

Because the hex entity is inside a style tag, it must be prepended with an escaped backslash, making it \e021.

This should be placed inside a <style> tag, or better yet, in a seperate stylesheet:

span.icon:before {
font-family:FontAwesome;
content:"\f015";}

To add this icon to a page, add this HTML tag anywhere in the body of your page.

<span class="icon"></span>

Note: This method is useful because it seperates the visual elements of your design—like icons—from the structural HTML, so you can add glyphicons to existing elements. Particularly useful for tasks like Wordpress or Moodle theme development, for example.

Examples

Note: For simplicity & clarity, in these examples Font Awesome has been paired up with the web components from Bootstrap 3. However, Font Awesome can be used in any website or web framework.

You can use glyphicons in a variety of ways; in buttons, button groups for a toolbar, navigation or prepended form inputs. Here are a few examples of glyphicons in action.