loading...
Cover image for How to use Fontawesome

How to use Fontawesome

dailydevtips1 profile image Chris Bongers Originally published at daily-dev-tips.com ・3 min read

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

Discussion

pic
Editor guide
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 Author

Thanks for this additional answers, well explained! 🤟

Thread Thread
zoedreams profile image
☮️✝️☪️🕉☸️✡️☯️

shit's complicated takes a tribe to code a line as they say

Thread Thread
huncyrus profile image
huncyrus

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.

Thread Thread
zoedreams profile image
☮️✝️☪️🕉☸️✡️☯️

LOL sorry wrong context my bad... I was referring more to computer science and front end work in general is complex. The font is super simple and awesome.

Collapse
dailydevtips1 profile image
Chris Bongers Author

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
zoedreams profile image
☮️✝️☪️🕉☸️✡️☯️

nice! however i see no love for the LLVM node peoples. anyone got a script to build this with yarn or npm? I would love to include this library into my current project but i need be able to use it as a asset and not an external CDN resource. I don't know if this resonates with anyone but i totally love the icons. Thank you.,

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 Author

Indeed also a good option!

Collapse
zoedreams profile image
☮️✝️☪️🕉☸️✡️☯️

We use it in semantic-ui. Thank you for sharing on how to implement this outside of that framework. GL;HC;

Collapse
dailydevtips1 profile image
Chris Bongers Author

Hey,

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

Collapse
zoedreams profile image
☮️✝️☪️🕉☸️✡️☯️

fork awesome i want to use for our system icons, for our files such. Reminds me of my IDEA plugin plugins.jetbrains.com/plugin/12416...

Two tone fonts is next level. Layer two fonts ontop. Crazy right?!

i personally prefer to try to work without framework if possible, i cringe at precompiled binaries.

Thread Thread
dailydevtips1 profile image
Chris Bongers Author

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

Collapse
tutorialsmate profile image
TutorialsMate

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

Collapse
dailydevtips1 profile image
Chris Bongers Author

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

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