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

06 Sep 2018
0
Comments
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

fab

Font Awesome Brands

brands.js

fa-brands-400

fas or fa

Font Awesome Solid

solid.js

fa-solid-900

far

Font Awesome Regular

regular.js

fa-regular-400

fal

Font Awesome Light

light.js

Fa-light-300

 

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:

 

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 .

 

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.




Leave a comment:

Recent Blogs
Contact-Us Contact-Us
Newsletter Newsletter