Icons – Freestyle

The Core style set contains the FontAwesome icon type face (v4.6.3). It offers a wide range of vector graphics which you can use to add scalable icons to your pages.


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>

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.