How to use Font Awesome Icons

Before you get to use Font Awesome Icons on your website, you will have to properly install them. There are several ways of installing icons so make sure that you have completed simple steps from the other article.

Once you’re done with the installation, let’s see how to actually display icons on your site.

Before we show you the code, check out the cheatsheet where you can see all the available icons you can use. Every icon has a unique name and you can display it by writing CSS “fa” prefix to it.

To show a simple icon without any customization, you will have to put a CSS class to an inline element. Although icons are often used as part of <i> tag, it would be better if you used them in <span> tag instead.

  • <span class=”fa fa-camera-retro”></span>

All Font Awesome icons are made as scalable vectors which means that you can use different image sizes without losing quality of displayed icon. There are several sizes already predefined so you can use one of the following classes>

  • <span class=”fa fa-camera-retro fa-lg”></span>  Large size
  • <span class=”fa fa-camera-retro fa-2x”></span> size 2x
  • <span class=”fa fa-camera-retro fa-3x”></span> size 3x
  • <span class=”fa fa-camera-retro fa-4x”></span> size 4x
  • <span class=”fa fa-camera-retro fa-5x”></span> size 5x

Font Awesome Icons can be used anywhere. For example, if you want to change default bullets in unordered list, you simply have to add a class to your list

<ul class="fa-ul">
<li><span class="fa-li fa fa-check-square"></span>List icons</li>
</ul>

It wouldn’t be that much fun if you couldn’t change a color of your newly installed icons. So, yes, you can easily change colors for each icon simply by adding a new CSS rule in style.css file. For example, you can easily paint cog icon red:

.fa-cog {
color: red;
}

Did you know that you can even animate your FA icons? If you use fa-spin class on your icon, it will rotate, and if you use fa-pulse class the icon will rotate in eight steps:

  • <span class=”fa fa-cog fa-spin”></span>
  • <span class=”fa fa-spinner fa-pulse”></span>

This will be just enough to get you going with your newly installed Font Awesome Icons. You can do practically anything with them and the only limit is your imagination. See few more examples of what you can do with Font Awesome Icons (rotate tem, flip them, stack them…) and once you’re done designed your own set of icon, leave a comment and show us your work.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *