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:

1. Solid Style

2. Regular Style

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

Table: Font Awesome 5 Details

Syntax

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=”https://use.fontawesome.com/releases/v5.2.0/css/v4-shim.css”>

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:

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.

Advantages:

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.