font-awesome Getting started with font-awesome Using Font Awesome

Example

Font Awesome is an extremely simple yet powerful library to use, with 634 icons available in just a few words.

How does it work? Font Awesome uses Unicode characters stored in a ../fonts directory to change any i.fa elements to the respective unicode character, as such displaying the icon as text.

How do I create an icon? All icon classes have to be an i element, or an italic element, mainly for best practice, but also improves performance with Font Awesome. All icons also have the class fa on them. This denotes an icon and will not work without it. After that, just add the icon you want, prefixed with another fa-. A finished example is below:

<i class="fa fa-pencil"></i> becomes

Because font awesome works off unicode characters, it also allows any text manipulation to apply to it as well, such as font-size, color, and more.