Discover Our Blog

Introduction of FontAwesome 5 and How to Use it for Web Designing

Introduction of FontAwesome 5 and How to Use it for Web Designing

Introduction to FontAwesome 5:


Font Awesome 5 is upgraded version of Font Awesome 4, It has a more attractive icon with big improvement icons as compare to Font Awesome 4

Some improved points are listed below:


  • FontAwesome 5 icons are drawn now with SVG.


  • Now we have to reference Javascript file with SVG embedded in place of CSS file ( In FontAwesome 4 we use CSS file only ).


However, version 5 is now redesigned and rewritten from scratch.


Now, Let us see the changes in FontAwesome 5


Different icon styles:


In Version 5, there are 3 different styles:

i) Solid Style

ii) Regular Style

iii) Light Style


“Brand Icons” are separated out into their own style and is easy to use. Version 4 had one prefix only “-fa” and Version 5 has four prefixes. To set a style of any icon with ease, every prefix has different Javascript and SVG file. If we want to use them, we need to import Javascript and SVG file. Some as mentioned below.


Font Awesome 5 Prefix

Icon Style

JS+SVG Filename

Web Font


Font Awesome Brands



fas or fa

Font Awesome Solid




Font Awesome Regular




Font Awesome Light




Table: Font Awesome 5 Details




Version 4’s Syntax


1)<i class=”fa fa-rocket”></i>


Version 5’s Syntax


1)<i class=”fas fa-rocket”></i>-----------“fas ‘s’ for Solid”

2)<i class=”far fa-rocket”></i>----------- “far ‘r’ for Regular”

3)<i class=”fal fa-rocket”></i>----------- “fal ‘l’ for Light”


Note:- Some Icon name changed in the upgraded version.


How to use FontAwesome 5:


Step1: Add Assets for FontAwesome 5 (Version 5)


Download cdn which is required for version 5


Web Font & CSS files


  1. css/solid.css

  2. css/regular.css

  3. css/brand.css

  4. css/fontawesome.css

  5. css/light.css

  6. For all CSS, we can use css/all.css


JS & SVG files


  1. js/solid-.js

  2. js/regular.js

  3. js/brand.js

  4. js/fontawesome .js

  5. js/light.js

  6. For all js, we can use js/all.js


There is one more file that is “ Shims ” file.

Shim file is created to be used as band-aids until you get time to upgrade. Version 4 allows you to keep v4 icon name, aliases, and syntax while mapping Version 5. If we want to use then add below extra line to our Version 5


<link rel=”stylesheet” href=””>


v4-shim is used for both Web Fonts + CSS and SVG + JS Frameworks.

If we want to use new and fancy SVG+JS of rendering icon, then switch the “css/all.css” into “js/all.js” also “css/v4-shims.css” into “js/v4-shims.js“


Step2: Add syntax in your HTML file


For Example:

<i class=”fal fa-rocket”></i>

<i class=”far fa-rocket”></i>

<i class=”fas fa-rocket”></i>


An effect you can see in below image:


FontAwesome 5 in Web Designing


Image: Font Awesome 5 Comparison


Note: In FontAwesome 5 some icon name are changed, if we don’t want to use them then, we have to add shim file. Version 5 has lots of icon but some icons are paid, if we want to use then we need to buy PRO Version .




1) Icon are designed using SVG and Javascript.

2) Icon Fonts are Ligatures and auto-accessibility.

3) Icon can be re-written, redesigned using CSS and JS.


Leave a comment: