How to install Font Awesome on Blogger to display icons on blogger

Font Awesome offer a vast range (600+) of excessive high-quality scalable vector icons, that can be easily be used on your weblog and customized using CSS. This put up will show you to add the icon font to your Blogger weblog and use icons inside your content.

Install Font Awesome on Blogger
Adding Font Awesome to Blogger is quite easy. Head over to the Font Awesome Get Started web page and enter your electronic mail address. They’ll email you with a special embed code that appears similar to the following

<script src="https://use.fontawesome.com/000aaaa000.js"></script>

Now you want to copy and paste that into your theme’s head section. On Blogger, go to Theme > Edit HTML and discover the closing head tag (). Right above, paste the embed code from Font Awesome.

Add Font Awesome Icons to Your Blogger Blog
Now that Font Awesome is installed, we can use some of the icons on our blogs to display in weblog posts, sidebar, navigation menu, buttons and so on. To do so we use an easy line of code in our HTML.

Visit the Font Awesome Icon web page and click on on the icon you want to use. On the committed icon page, you’ll see code that looks like this

<i class="fa fa-icon-name" aria-hidden="true"></i>

Paste this where you want to display the icon – this could be in a post, page, sidebar gadget, navigation, footer or anywhere else that accepts HTML.

Example: Adding <i class="fa fa-twitter" aria-hidden="true"></i> would display

In order to make the icon a clickable link, we can wrap it in link tags like so

<a href="URL" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook" aria-hidden="true"></i></a>

Customizing Font Awesome Icons using CSS
You can customize the CSS and trade the icon color, size, shadows and so on. To do this, use the icons classification name (like fa-twitter) or the usage of the established classification fa to target all icons.

.fa { /* CSS Styling Goes Here */ } .fa-twitter { /* CSS Styling Goes Here */ }
There’s a lot of different methods to personalize the icons too, check out the examples web page here.

Related: Correctly Centre Items on Blogger
Add Font Awesome Icon to a Clickable Button
We can also add the icon earlier than or after a button the use of CSS. First, you’ll want to fashion a text hyperlink to seem like a button, you can study how to do that here.

Now using the Unicode (looks like f000) provided on the dedicated icon page on Font Awesome, we’ll add the following CSS to display the icon after our button.

.blackbtn:after { 
content: "\f000"; 
font-family: FontAwesome; 
font-size: 16px; 
padding-left: 10px; 
}

or before our button

.blackbtn:before { 
content: "\f000"; 
font-family: FontAwesome; 
font-size: 16px; 
padding-right: 10px; 
}

Replace f000 with the Unicode variety of your icon and customize the CSS as you wish.

So there is how to add Font Awesome to your Blogger weblog and use icons inside your content. As you can see there’s so tons you can do with Font Awesome icons on your blog! Try the usage of them in your navigation menu for social media icons or submit footer for share icons, as a search icon or when growing a list within your blog post.