How to add Font Awesome to blogger post

Font Awesome is the web's most popular icon toolkit based on CSS and LESS. It is a font that's made up of symbols, icons, or pictograms (whatever you prefer to call them) that you can use in a webpage, just like a font. Font Awesome Icons are simply amazing and the library is constantly growing. It gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS. Icons are important to web projects because they are a visual way to help add meaning to elements. And font awesome is the best for that purpose since it is retina ready and easy to style. Besides, there is no need to worry about Font Awesome’s browser compatibility; it’s well supported by all modern browsers. With all file formats included (.eot, .ttf, .woff, and svg), it’s treated the same as other web fonts. So, here's a tutorial on how to add Font Awesome to your blogger.

Step 1: Go to this link Font awesome icons
Step 2: Go to www.blogger.com to log into your blogger account.

Step 3: Go to your blogger dashboard and select theme.

Step 4: Hit Edit HTML as shown below

Step 5: Search for the code below:

    Just below <meta content=............ but above <link href=.........., paste the following code: 

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

 Step 6: Once you have done that press Ctrl+F or Command+F to find this code:

]]></b:skin>

Step 7: Now go to the Font Awesome website we have opened before. Select one of the icons. For now, I am going to select "address-book"

As shown above the address book class is fa-address-book
We shall copy the code later. Let's go back first to our blogger edit html.
Just above ]]></b:skin> code paste the following css code.
It is here that we will use the address book class.

.fa-address-book {
   font-size:32px;
   font-weight:bold;
   color:#033;
   border:1px solid #000;
   padding:10px;
   float:left;
}


Finally save the theme.


Step 8: Next step is to go to your blogger post.

Make sure that you are on the HTML side and not Compose
Now add the following code which can be copied from font awesome website

<i class="fas fa-address-book"></i>

Save the post and preview. Walla! You have added a font awesome icon to your blog post.