The Beginners Guide to Font Awesome

Font Awesome is the most popular way to add font icons to your website. Font Awesome icons are created using scalable vectors, so you can use high quality icons that work well on any screen size.

In this tutorial, I’m going show you how to use Font Awesome and play with its features.

Step #1. Download and install Font Awesome

• Go to the Font Awesome site.
• Click the Download button.

• Decompress the zip.
• Copy the /css/ and /fonts/ folders, and upload them to your site.

Inside the head tag of your site, load the Font Awesome CSS:

<link rel="stylesheet" href="path/to/css/font-awesome.min.css">

Step #2. Add icons to your site

To add an icon, use the i tag following this pattern:

<i class="fa fa-icon-name"></i>

Replace “icon-name” with one of the icon’s name from here. For example, to display the “check” icon use this code:

<i class="fa fa-check"></i>

…that would render as:

Note: you can use the span or em tag as well.

Step #3. Use bigger icons

To display bigger icons include one of these classes in the i tag:

• fa-lg
• fa-2x
• fa-3x
• fa-4x
• fa-5x

For example:

<i class="fa fa-check fa-5x"></i>

Step #4. Use stacked icons

To mix two icons and get a different result, wrap both elements with the “fa-stack” class:

<span class="fa-stack">
[ The icons goes here ]
</span>

The two icons may optionally include one of these classes:

• “fa-stack-2x” to make the container icon bigger
• “fa-stack-1x” to make the contained icon smaller

For example:

<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-check fa-stack-1x"></i>
</span>

• The “square-o” icon is the container
• The “check” icon is the contained

You can even add inline CSS to emphasise one of the elements by adding color:

<span class="fa-stack">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-check fa-stack-1x" style="color:green;"></i>
</span>