FontAwesome Icons

The Core style set contains the FontAwesome icon type face (v4.0.3). It offers a wide range of vector graphics which you can use to easily add scalable icons 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 font color classes described in the Fonts section.

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 icons or making them spin , please see the official documentation.