The Beginners Guide to Font Awesome

How to Add Icons to your Site with 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

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

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:

Font Awesome

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>

Font Awesome

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>

Font Awesome
  • 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>

Font Awesome

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.