Font Awesome Icons To Blogger: Using CSS Content & </i> Tag

Font awesome icons are widely used in the web designing likewise Google custom fonts. In blogger and wordpress they have equal gravity in using by developers. But it's so easy to enable font awesome icons on both blogger and wordpress sites and to do so you don't need to be any expert coder just to have your simple knowledge on html and css will help you in this case.

Today i have come with a beautiful tutorial for newbie bloggers, demonstrating how to use font awesome icons in blogger templates in both css content case and <i> tag case. I have written a detail guide (attaching appropriate images) so that you can understand the tutorial and exert it on your own blog. Let's see how to do this by yourself.

Install Font Awesome on Blogger Template

Got to font awesome get started section and choose the latest version of font awesome

Now we will load font awesome asynchronously so that it will reduce page load time on our blog. So from the following code simply copy it

<!--
Load Font Awesome asynchronously
Use: Just put this script on the bottom/footer of your web
-->
<script type="text/javascript">
(function() {
var css = document.createElement('link');
css.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css';
css.rel = 'stylesheet';
css.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(css);
})();
</script>

N.B. Font awesome latest versin is already enabled

    1. Now go to Blogger > Template section
        Restore your template
    2. Now click on Edit HTML and search for </body>

Now paste the copied code right before </body> tag

And you have successfully installed Font awesome on blogger template

How to Use Font Awesome Icons?

There are two different ways to install font awesome icons on blogger blogs.

Method-1: Using font awesome <i> tag:

For example we want to  use font awesome icon before an anchor text

So write font awesome in following way

<i class="fa fa-envelope-square"></i> <a href="#">Anchor</a>

So font awesome icon will show before your anchor text, similarly below code will show opposite

<a href="#">Anchor</a> <i class="fa fa-envelope-square"></i>

Your anchor text first then font awesome icon

Likewise you can use font awesome icon before any normal text, headline text, even on your post content.

How to style font awesome icon?

Sometimes we need to change style of font awesome icon so we can optimize the <i> tag like this

<i class="fa fa-envelope-square" style="float: left; font-size: 12px; color: #AAA; vertical-align: middle; padding-right: 5px;"></i>

Meaning:

1. Font awesome icon will show left of the objective: float: left;
2. Font awesome icon color is grey: color: #AAA;
3. Font size of the icon: font-size: 12px;
4. Font awesome icon will remain middle before or after the objective: vertical-align: middle;
5. It will create an space right of the icon: padding-right: 5px;
6. You can even create space left of the icon by using: padding-left: 5px;

You can even wrap them using class module like that

<style>

.font-awesome {
    float: left;
    color: #AAA;
    font-size: 12px;
    vertical-align: middle;
    padding-right: 5px;
}

</style>

<i class="fa fa-envelope-square" class="font-awesome"></i>

Method-2: Using Font Awesome Icon as CSS Content

So we will use font awesome icon as a CSS content therefore we will write the content in CSS to apply icon directly on HTML see below

<style>

.font-awesome:before {
   font-family: FontAwesome;
   content: "\f199";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
}

</style>

<div class="font-awesome">

Add Text Here

</div>

So we will add the CSS code directly on our template by clicking on Edit HTML and searching for </b:skin

Now add following CSS code right before </b:skin tag

.font-awesome:before {
   font-family: FontAwesome;
   content: "\f199";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
}

And save your template

Now add following code to attach icons on your template

<div class="font-awesome">

Add Text Here

</div>

Meaning:

To add text replacing Add Text Here
To add anchor text replacing Add Text Here

How to Get The Icon Code?

To get the right icon code load font awesome url opening a new tab of your browser

//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css

Go and choose font awesome icon

Click on any icon and it will show you the <i> tag with appropriate name of that icon in font awesome language

Now select and copy the icon code

Now turn to the font awesome icon tab and search for fa content code
 

Copy that code and use in place of yellow highlighted "\f199" code in above css code

Need More Assists?

If you know the basics of html and css then this tutorial is very simple to you to understand but for newbies this might play difficulty in understanding. But for your better consultation i would say you please do let me know where you have faced problem and want me to fix that.

If you get tutorial helpful don't forget to share this on social media.