FontAwesome Icons

The Core style set includes the FontAwesome icon type face in version 4.0.3. It offers a wide range of icons in the form of vector graphics which you can use to easily add scalable icons in any color to your pages.

Usage

To use FontAwesome icons anywhere in your markup, just place an inline element (such as a <span>) where you want your icon, and apply the .fa class to it.

Then take a look through the icons offered on the official FontAwesome homepage and add the class name stated there (e.g. .fa-smile-o).

Simple FontAwesome icon

<span class="fa fa-smile-o"></span>

You can make your icon bigger using the class .fa-lg (33% increase), or multiply its size with the .fa-nx classes, as in .fa-2x.

FontAwesome icons in different sizes

<span class="fa fa-smile-o fa-lg"></span>

<span class="fa fa-smile-o fa-2x"></span>

<span class="fa fa-smile-o fa-5x"></span>

Being a font, you can color FontAwesome icons as you would color any text, using the Core styles' font color classes (see Fonts).

Colored FontAwesome icon

<span class="fa fa-smile-o fa-3x font-brandorange"></span>

For more examples of what you can do with FontAwesome icons, like stacking items or making them spin , please see the official documentation.