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.
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
).
<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
.
<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.
<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.