loading...
Cover image for Font Awesome guide and useful tricks you might not know about.

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

weeb profile image Patrik Kiss Updated on ・6 min read

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>

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

Alt Text
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>

Alt Text


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

Alt Text

Alt Text


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>

Alt Text


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>

Alt Text


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>

Alt Text


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>

Alt Text


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>

Alt Text
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.

Alt Text

<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

<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?

Discussion

pic
Editor guide
Collapse
poteirard profile image
Gerard Brull

Great list. I didn't know they had these features 👏👏 Does anyone know if there is a way to make them accessible?

Collapse
adrianolupossa profile image
Adriano Lupossa

To make than accessible you can add an alternative text with span and add some class that makes visible only to screen readers

Collapse
sanjayism profile image
sanjayism

Hi, I am double of your age, still learning web development but not in right way...
Your article is awesome and helpful.. I will use in my learning work..and inform you after that..

Collapse
rohansawant profile image
Rohan Sawant

Whooa! I only knew about animating and resizing!

Shared! 🔥

Collapse
shaunguimond profile image
Shaun Guimond

This is great, thank you for sharing 😀

Collapse
mihirkumarthakur profile image
Mihir Kumar Thakur

Great, Thank You

Collapse
cristinaruth profile image
Cristina Ruth

Patrik, great article! Thanks for putting this together and for laying it out so concisely and in an easy-to-understand format. 🙂

Collapse
jnystromdesign profile image
Joakim Nystrom

Nice post! Wasn't aware of all the cool stuff the JS implementations lets you do.

Collapse
louisefindlay23 profile image
Louise

Wow, I didn't know about these. I especially love the text in an icon.

Collapse
gentlyawesome profile image
Arc Angelo Ibalio

Awesome! I love adding a badge to the icon like a notification. This is a gem.

Collapse
herquiloidehele profile image
Collapse
nguyenquangtin profile image
Tony Tin Nguyen

Great post, thank you Kiss Patrik.

Collapse
junlow profile image
jun

It's awesome! Thanks for sharing!

Collapse
vletierce profile image
vletierce

Vefy good quick guide! Thanks

Collapse
ingcarlostello profile image
Carlos Tello

Wuaoo what a nice tricks

Collapse
keeran_raaj profile image
Raj Kiran Chaudhary

Great article Patrik..... I didn't know these tricks though I was using FA for a long time.

Collapse
luckytuvshee profile image
LuckyTuvshee

Wow it's mind blowing xD
Thanks for sharing,

Collapse
elmuerte profile image
Michiel Hendriks

Duotone icons are just a fad.

Collapse
reythedev profile image
Rey van den Berg

Great article! Straight to the point and very helpful! Thanks :)

Collapse
aboudard profile image
Alain Boudard

Awesome liste so to speak 😎
Really helpful.

Collapse
castroalves profile image
Cadu de Castro Alves

Wow! Thanks for sharing this! ♥️

Collapse
logeshpalani98 profile image
Logesh Palani

Great Article man