DEV Community

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

Posted on • Edited on

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">
Enter fullscreen mode Exit fullscreen mode

Or the minified version



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

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Or the minified version



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

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Alt Text
There, we have combined



<i class="fas fa-comment"></i>
Enter fullscreen mode Exit fullscreen mode

with



<i class="fas fa-pencil-alt"></i>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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?

Top comments (23)

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
 
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
 
shaunguimond profile image
Shaun Guimond •

This is great, thank you for sharing 😀

Collapse
 
mihirkumarthakur profile image
Mihir Kumar Thakur •

Great, Thank You

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
 
reythedev profile image
Rey van den Berg •

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

Collapse
 
herquiloidehele profile image
Herquiloide Hele •

Great post

View full discussion (23 comments)

Read next

oliverbennet profile image

Prometheus 3.0: A Quantum Leap in Monitoring

Oliver Bennet -

mshsayket profile image

How to Generate QR Code in Laravel 11

Saddam Hossain -

elanatframework profile image

CodeBehind 3.8 Released

elanatframework -

mshsayket profile image

How to Install Bootstrap 5 in Laravel 11 with Vite?

Saddam Hossain -