DEV Community

Cover image for How to use Fontawesome
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

How to use Fontawesome

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

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

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

Alternatively we can just style if by using classes:

<i class="fas fa-car ferrari"></i>
Enter fullscreen mode Exit fullscreen mode
.ferrari {
  font-size: 30px;
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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

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)

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

I wonder about colors...

Collapse
 
huncyrus profile image
huncyrus

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...).

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks for this additional answers, well explained! 🤟

Collapse
 
dailydevtips1 profile image
Chris Bongers

Like mentioned by huncyrus there are rendered as a font/svg in which you can change it so any color you want.

Collapse
 
thomasbnt profile image
Thomas Bnt

I personally prefer Fork Awesome. More icons about decentralized tools

Collapse
 
dailydevtips1 profile image
Chris Bongers

Indeed also a good option!

 
huncyrus profile image
huncyrus • Edited

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.

Collapse
 
tutorialsmate profile image
TutorialsMate

It is decreasing my site speed a bit. -_-

Collapse
 
dailydevtips1 profile image
Chris Bongers

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.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Read here about using them as SVG's daily-dev-tips.com/posts/fontaweso...

Collapse
 
huncyrus profile image
huncyrus

I thought it will be a deep introduction for the FA. Just quick small additions:

  • You can customize it through various ways (like recompile it from sass or at download with simple naming)
  • The font contains webfont, classical font and SVG based variant to make it work on every browser
  • icons as fonts could/may give hard time for accessibility
  • Absolutely fast and easy was to build something
  • Have to consider some caching strategy or customise option to ship product level because of size

Personal note:

  • Worth to check out competitors, such as gliph icons, icomoon or other tools because there are a few dozen of version
  • Many company ditched icons and started to use svg only custom tailored versions

...We can use inline styling...
But shouldn't like never ever.

Collapse
 
dailydevtips1 profile image
Chris Bongers

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.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Here is the SVG option: daily-dev-tips.com/posts/fontaweso...

Collapse
 
thomasbnt profile image
Thomas Bnt

You can directly download the files and host on your server without CDN service. 🙌🏼
A example on my website

Collapse
 
dailydevtips1 profile image
Chris Bongers

Hey,

Many frameworks do come with font awesome same as bootstrap, but you will sometimes need it without a framework! :D

 
dailydevtips1 profile image
Chris Bongers

Me too, I do love frameworks for quick bootstrapping beta's but mainly build without any framework.