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

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Article Rating
Subscribe
Notify of
guest

9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Johnny
Johnny
8 years ago

just duplicating what is already on the font-awesome website – what’s the point of that?

htmgarcia
8 years ago
Reply to  Johnny

Hi Johnny,
Duplicated? It’s a beginner tutorial for anybody that find it useful 🙂
Regards

juanGatito
juanGatito
7 years ago

thanks for sharing your knowledge

alex-smirnov
6 years ago
Reply to  juanGatito

You are welcome, juanGatito.

Suzy
Suzy
3 years ago
Reply to  Johnny

Lets be polite – the article is concise and easy to read.

Mike
Mike
7 years ago

This went nowhere, super basic. I just wasted a minute of my life I will never get back…lol

xe
xe
6 years ago

I found this super useful, thanks! Much easier to follow than the tutorial on the fontawesome site

alex-smirnov
6 years ago
Reply to  xe

You are most welcome, xe!

Joe Vera
Joe Vera
5 years ago

for those who do not want to read through voluminous text in the font awesome website, you will find this handy

9
0
Would love your thoughts, please comment.x
()
x