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-#
andshrink-#
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-#
, andright-#
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>
<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 defaultfa-layers-top-right
. Overflow text is truncated with an ellipsis.
Awesome, isn't it?
Top comments (23)
Great list. I didn't know they had these features 👏👏 Does anyone know if there is a way to make them accessible?
To make than accessible you can add an alternative text with span and add some class that makes visible only to screen readers
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..
Whooa! I only knew about animating and resizing!
Shared! 🔥
Patrik, great article! Thanks for putting this together and for laying it out so concisely and in an easy-to-understand format. 🙂
This is great, thank you for sharing 😀
Great, Thank You
Nice post! Wasn't aware of all the cool stuff the JS implementations lets you do.
Wow, I didn't know about these. I especially love the text in an icon.
Awesome! I love adding a badge to the icon like a notification. This is a gem.
Great article! Straight to the point and very helpful! Thanks :)
Great post