I'm pretty sure everyone has seen Fontawesome icons somewhere, they are so widely used and even included in Bootstrap.
Today we are going to look at how you can use Fontawesome for your website!
We are going to be looking at Fontawesome 5 it comes with a PRO version and a FREE version, we will only be looking at the FREE version in this article.
Getting started with Fontawesome
We are going for the quickest way of getting started, this is by including a CDN (Content delivery network) link.
<html>
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"
/>
</head>
</html>
This will load the stylesheet without us having to have it locally installed.
Using the icons
We can find the icon we are looking for on the Fontawesome website and use the shorthand to use the icons.
<i class="fas fa-clock"></i> <i class="far fa-clock"></i>
If you are familiar with the older version we always used the fa code, we now use fas and far which stand for:
- fas: Solid
- far: Regular
Styling Fontawesome Icons
We can use inline styling for these icons like the following example:
<i class="fas fa-car" style="font-size:30px; color: red;"></i>
Alternatively we can just style if by using classes:
<i class="fas fa-car ferrari"></i>
.ferrari {
font-size: 30px;
color: red;
}
Sizing Fontawesome Icons
So instead of defining the size in style, we can use classes defined by Fontawesome to size the icons.
We can use the following sized: fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, or fa-10x
<i class="fas fa-angellist fa-xs"></i>
<i class="fas fa-angellist fa-sm"></i>
<i class="fas fa-angellist fa-lg"></i>
<i class="fas fa-angellist fa-2x"></i>
<i class="fas fa-angellist fa-5x"></i>
<i class="fas fa-angellist fa-10x"></i>
Fontawesome List icons
Another cool thing we can do with Fontawesome is use if for list items:
<ul class="fa-ul">
<li>
<span class="fa-li"><i class="fas fa-carrot"></i></span>List Item
</li>
<li>
<span class="fa-li"><i class="fas fa-caret-square-right"></i></span>List Item
</li>
<li>
<span class="fa-li"><i class="fas fa-cat"></i></span>List Item
</li>
</ul>
Animation Fontawesome Icons
So many great options with Fontawesome, we can even animate them quickly.
We can use fa-spin to rotate an icon and fa-pulse to rotate in eight steps.
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-circle-notch fa-pulse"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-cog fa-pulse"></i>
Rotating and Flipping icons
Let's say you want to flip or rotate an icon, Fontawesome also comes with classes to do so:
<i class="fas fa-horse"></i>
<i class="fas fa-horse fa-rotate-90"></i>
<i class="fas fa-horse fa-rotate-180"></i>
<i class="fas fa-horse fa-rotate-270"></i>
<i class="fas fa-horse fa-flip-horizontal"></i>
<i class="fas fa-horse fa-flip-vertical"></i>
Stacking Fontawesome Icons
We can also choose to stack icons on top of each other:
<span class="fa-stack fa-lg">
<i class="fas fa-smoking fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
You can see al described demo's on this codepen:
See the Pen How to use Fontawesome by Chris Bongers (@rebelchris) on CodePen.
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
Top comments (16)
I wonder about colors...
The icons - since they behave/are font elements - shall use the colours same way just like any other text/string element on the page. You can do any transformation or css trick also on them. The only thing what have to consider is the icon variant (outline, filled versions...).
Thanks for this additional answers, well explained! π€
Like mentioned by huncyrus there are rendered as a font/svg in which you can change it so any color you want.
I personally prefer Fork Awesome. More icons about decentralized tools
Indeed also a good option!
Which part is complicated?
Last time when I used, I copied the css & font files into my public, then included into my header then added a simple < i class="fas fa-check-circle" >< /i > and it worked.
It is decreasing my site speed a bit. -_-
Hey!
This indeed is a downside it will be faster loading the font locally, or if you only need a limited number of icons you can use the direct SVG codes.
Read here about using them as SVG's daily-dev-tips.com/posts/fontaweso...
I thought it will be a deep introduction for the FA. Just quick small additions:
Personal note:
100% agreed, you must understand it's hard to write a blog every day and include every possible aspect of what can happen or options there are.
So hence it always being very small starting elements.
I indeed choose the SVG option for many of my website, most of the time I only need 3/4 icons and will choose to just use the SVG code instead of loading font awesome.
As of the inline styling, You are correct! Haha, it shouldn't be used.
Although it seems to be coming back more with React etc. that will render more inline nowadays.
Thank you so much for the addition, put some points on my todo list to refactor as well.
Here is the SVG option: daily-dev-tips.com/posts/fontaweso...
You can directly download the files and host on your server without CDN service. ππΌ
A example on my website
Hey,
Many frameworks do come with font awesome same as bootstrap, but you will sometimes need it without a framework! :D
Me too, I do love frameworks for quick bootstrapping beta's but mainly build without any framework.