DEV Community

Cover image for How to use Fontawesome

How to use Fontawesome

Chris Bongers on June 22, 2020

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