Font Awesome guide and useful tricks you might not know about.
Tags: webdev, html, beginners, tutorial
Published: 2019-12-21 10:12:12

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. 
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
```
Or the minified version
```html
<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**
```html
<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

```html
<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>
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2dt3ccu0np1rm3yg1xfd.jpg)
`fa-#x` classes are available from 2-10(`fa-[2-10]x`). Here's the font size of each class

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hjpcmbu0q1re8em2q9i0.jpg)
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
```html
<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>
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fktl31tvo2ht3rddt6ax.jpg)
***
#**3.Rotating icons**
You can also rotate your icons without the use of CSS's `transform` property, only adding one more class!
```html
<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**
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/mboi1co3zcshem6wv9gj.jpg)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1vayv51ycp623z9my9p7.jpg)
***
#**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`)**

```html
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fbxcvl50mdxaxfdqfr59.gif)
***
#**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
```html
<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>
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jftlr152zum9n1ycoio5.jpg)
***


**The following features require the JS version of Font Awesome!**
Include this inside your `head` tag.
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js"></script>
```
Or the minified version
```html
<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:
```html
<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>
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/24z0aqu2i6dsn1reeyff.jpg)
***
#**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**
```html
<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>
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wla7s2cplhe031uoqo6q.jpg)
***
#**8.Masking icons**
This feature allows you to combine 2 icons into 1, similar to stacking.
```html
<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>
```
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/e5vp90eoql6d1zk1blse.jpg)
There, we have combined
```html
<i class="fas fa-comment"></i>
```
with
```html
<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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lt2z4jkp4a5otqdd0hn0.jpg)
```html
<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.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/eyi7n4lvpkog10vixhn9.jpg)
```html
<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?**