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:
<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
<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>
just duplicating what is already on the font-awesome website – what’s the point of that?
Duplicated? It’s a beginner tutorial for anybody that find it useful 🙂
thanks for sharing your knowledge
You are welcome, juanGatito.
Lets be polite – the article is concise and easy to read.
This went nowhere, super basic. I just wasted a minute of my life I will never get back…lol
I found this super useful, thanks! Much easier to follow than the tutorial on the fontawesome site
You are most welcome, xe!
for those who do not want to read through voluminous text in the font awesome website, you will find this handy