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:

{codecitation}<link rel=”stylesheet” href=”path/to/css/font-awesome.min.css”>{/codecitation}

Step #2. Add icons to your site

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

{codecitation}<i class=”fa fa-icon-name”></i>{/codecitation}

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

{codecitation}<i class=”fa fa-check”></i>{/codecitation}

…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:

{codecitation}<i class=”fa fa-check fa-5x”></i>{/codecitation}

Font Awesome

Step #4. Use stacked icons

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

{codecitation}<span class=”fa-stack”>
[ The icons goes here ]
</span>{/codecitation}

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:

{codecitation}<span class=”fa-stack”>
<i class=”fa fa-square-o fa-stack-2x”></i>
<i class=”fa fa-check fa-stack-1x”></i>
</span>{/codecitation}

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:

{codecitation}<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>{/codecitation}

Font Awesome

Instructor

  • 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
Blog Rating
Subscribe
Notify of
9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Johnny

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

htmgarcia

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

juanGatito

thanks for sharing your knowledge

alex-smirnov

You are welcome, juanGatito.

Suzy

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

Mike

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

xe

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

alex-smirnov

You are most welcome, xe!

Joe Vera

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