Patrik Kiss

Posted on Dec 21, 2019 • Updated on Jan 5, 2020

Font Awesome guide and useful tricks you might not know about.

#webdev #html #beginners #tutorial

Many of you have probably at least heard about Font Awesome, or maybe even use it on daily basis.

But in case you don't know about it, Font Awesome is an amazing icon library for web, with thousands of icons in different styles.

It uses SVG to create icons, but don't worry, you don't need to know anything about SVG! Let's begin then

FA icons have 4 styles

Solid
Regular
Light
Duotone

Out of these, solid is free most of the time, the rest are in the pro version only.

To use any feature of Font Awesome, first you need to include this line in your HTML's head tag.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">

Or the minified version

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

And this is how the formula looks like for an icon

<i class="fa[first letter of style(s|r|l|d)] fa-[name of the icon]"></i>

The icons always use the i tag, and everything goes in the class attribute.

Now that we went through the very basics, let me show you some really useful features that Font Awesome provides you!

1.Sizing icons

That's right! FA allows you to size their icons without using any CSS, by creating their own classes, which you just need to add to the icon

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

fa-#x classes are available from 2-10(fa-[2-10]x). Here's the font size of each class

Isn't it much easier this way?

2.Icons in a list

You can easily add icons before the list elements by adding fa-ul class to your list and wrapping the icon in a span with the fa-li class

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

3.Rotating icons

You can also rotate your icons without the use of CSS's transform property, only adding one more class!

<div class="fa-4x">
  <i class="fas fa-snowboarding"></i>
  <i class="fas fa-snowboarding fa-rotate-90"></i>
  <i class="fas fa-snowboarding fa-rotate-180"></i>
  <i class="fas fa-snowboarding fa-rotate-270"></i>
  <i class="fas fa-snowboarding fa-flip-horizontal"></i>
  <i class="fas fa-snowboarding fa-flip-vertical"></i>
  <i class="fas fa-snowboarding fa-flip-both"></i>
</div>

Here's what these classes do

4.Animating icons

Also by only adding a simple class, FA provides you some basic animations to add to your icons, such as spin(fa-spin) and pulse(fa-pulse)

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>

5.Stacking icons

For this, you just need to add fa-stack class to the parent element, and inside it just regularly put icons, like this

<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

The following features require the JS version of Font Awesome!
Include this inside your head tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js"></script>

Or the minified version

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>

6.Scaling icons

Scaling affects icon size without changing or moving the container. To scale icons up or down, use grow-# and shrink-# with any arbitrary value, including decimals.

So you can change the size of an icon, without affecting the parent element.

Here's an example:

<div class="fa-4x">
  <i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
  <i class="fas fa-seedling" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="grow-6" style="background:MistyRose"></i>
</div>

7.Positioning icons

Positioning affects icon location without changing or moving the container. To move icons up, down, left, or right, use up-#, down-#, left-#, and right-# with any arbitrary value, including decimals.

You can also position the icons, without affecting the parent element. It's almost like an absolute positioning in CSS.

Example

<div class="fa-4x">
  <i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 up-6" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 right-6" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 down-6" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 left-6" style="background:MistyRose"></i>
</div>

8.Masking icons

This feature allows you to combine 2 icons into 1, similar to stacking.

<div class="fa-4x">
  <i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i>
</div>

There, we have combined

<i class="fas fa-comment"></i>

with

<i class="fas fa-pencil-alt"></i>

How it works
In the class attribute goes the name of the inner icon, fas fa-pencil-alt, following the above example. In the data-fa-mask attribute goes the name of the outer icon. In this case fas fa-comment

9.Text over icons

You can add a text over an icon.

<span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-calendar"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
  </span>

  <span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-certificate"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
  </span>

You need to wrap the icon into a span for example, and add the fa-layers class to it.
Inside it add the icon, and another span element, which contains the text, with the fa-layers-text class.

10.Adding counter to icons

You can also add a counter to an icon. Good example is to display the number of messages received on an envelope icon.

<span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-envelope"></i>
    <span class="fa-layers-counter" style="background:Tomato">1,419</span>
  </span>

It works the same way as putting text over an icon, but instead of fa-layers-text, you need to add the fa-layers-counter class.

The counter is positioned at the top-right corner by default, but you can position it elsewhere too.

Can be positioned with fa-layers-bottom-left, fa-layers-bottom-right, fa-layers-top-left and the default fa-layers-top-right. Overflow text is truncated with an ellipsis.

Awesome, isn't it?