Implementing Font Awesome 5

Font awesome 5 is an icon set and toolkit making it easy for web designers to add vector icons and social icons to website. We had been using font awesome since 3 version and we have explored version 5 soon after its release.
For any websites, Fonts in Websites play an impact in UI / UX.

Font awesome is just awesome!!

The main reason of Font awesome5 doing great is it is been a popular repository and yet to find a competitor of its par. They provide wide
range of icons set. None of the other icon packs provide such versatility and compatibility.

Styles of FontAwesome 5

1) Solid
2) Regular
3) Light
4) Brands

Font awesome 5 icons

Font Awesome 5 comes in two versions :

1) Free
2) Pro
Font Awesome5 official documentation states that we may get a Pro license of $60 with 1,718 more icons to the free version of 989 icons. Icons of light styles comes with Pro version
Font awesome 5 comes in two formats
1) Web fonts for embedding in our project file.
2) Desktop fonts as svg and otf format.Font awesome Desktop fonts can be downloaded from the official website.

Categories in Font Awesome 5

As mentioned earlier, Font Awesome 5 proves its strong collection of icons with different categories.
Listing few categories
1) Date and time
2) Payments & Shopping
3) Shapes
4) Sports
In Font Awesome 4 class fa is added to i tag. Here, In Font Awesome 5 class fab, far, fas, fal are used to represent icons from brand, regular, solid and light styles respectively. If missed, icons are not converted into SVG.
The icon inherits the font styles from the parent class. Here I have added custom styles to .font-wrap

<div class="font-wrap"><i class="fab fa-facebook"></i></div>
<div class="font-wrap"><i class="far fa-address-book"></i></div>
<div class="font-wrap"><i class="fas fa-arrow-right"></i>/div>
<div class="font-wrap"><i class="fal fa-certificate"></i>/div>

CSS applied to the outer div

.font-wrap{
        font-size: 40px;
        color: #fc8a25;
        display: inline-block;
        margin: 5px;
      }
    

Ways to implement font awesome 5

1. Web fonts & CSS
2. SVG & JS
Font awesome provides free CDN to use in our projects. Font awesome CDN provides cached version and assets can be included based on the method we are adopting. It is enough to include either css file or js file.
Font awesome 5 works fine with <i> tag. There is a little workaround when used with pseudo content.

Adding pseudo elements using SVG with JS technique

The official documentation of Font Awesome warns that this method is not recommended. From now on, Font Awesome 5 icons if needed to be added as pseudo elements it is better to follow the alternative technique of Web fonts with CSS
We may need to configure options and loading may take time putting our user experience as a question.

What doesn't work!

Before exploring the configuring option, I tried simply by adding the Unicode value to before element.
It failed to convert into SVG as it is looking for encountering an i tag.

What worked!

Configure options for pseudo elements using Font awesome 5 SVG with JS





Sizing of Icons

Font Awesome 5 icons have default sizing similar to that of previous versions.
The sizing of font awesome 5 icons come with class names fa-xs,fa-sm,fa-lg,fa-2x to fa-10x.
Subscribe to Creative Technocrayts and be a part of growing community.
Read our next article for updates in font awesome 5.1