How to use font awesome icon in blogger ?

Every blogger wants to design their desired blog like mind. Everyone does not make any effort to make the blog a professional quality. But it is not possible to design for everyone because there is an in-depth knowledge about web development. With today's this post you can use at least a variety of icons to make your blog look somewhat professional. You surely see that many blogs and websites have different attractive icon designs. But these socks are not found anywhere in the image format. Actually those images are not any images. This is a type of font icon. Which makes a website attractive, as well as many of these speed home. Use of this Font Icon will prevent your blog / website from being overwhelmed by this excessive pressure due to excessive use of images on the website.

Font Awesome Icons: Font Awesome is a type of iconic font designed by Bootstrap. This is a type of SVG (Scalable Vector Graphic) icon, which you can customize if you want and you can use any type of blog or website. These icons are not fixed on any specific size. You can use any size icon if you wish. If you use any type of icon, small or large it will not change graphically. Moreover, if you want, you can use any of the color effects in it using the Css code. If you look at my blog menubar, I will see that I have created some icons using Font Awesome.

How to add the Font Awesome icon to the blog:

• First log in to your Blogger account.
• Then click on Template> Edit HTML from the Blogger Dashboard.

• Then press Ctrl + F to search the </ head> section.
• Paste the following line and paste it above </ head>.

[code start] <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet'/> [code end]

• Then click on Save Template.

The Css code of the Font Awesome icon associated with your blog is linked to this link above. If you wish, you can upload these codes of your own server and use it. Now let's show you how to use these icons on your desired page or place.

• Now you have to choose which code you would like to use on your page / templates. For this you can choose your preferred icon from the Official Font Awesome website.
• To select the preferred icon from here, by typing the icon's name in the search bar and clicking on it, you will see a class like this below.

[code start] <i class="fa fa-home"></i> [code end]

• The red section of the upper class is the name of your desired icon. In this section you can use different icons with different font names. However, every time I have to use this <i class = "fa fa-name"> </ i>.

Icon Customize:

• If you wish, using the following Css code, you can make more changes, including size, color and borders of your Font Icons. For example, I'm going to show the Home icon--

[code start] .fa-home {

 font-size:20px;
 color:#000000;
 padding:5px;
 border:1px solid #000;
 float:left;
}
[code end]

• In this way, while customizing the icon, the Css code will be used according to the name of each icon. Below we give examples of a few more types--

Add Large Icon:

• For bigger icon, fa-lg will continue to increase by 33% after adding sequentially fa-2x, fa-3x, fa-4x, and fa-5x classes. See below -

[code start] <i class="fa fa-car fa-lg"></i>

<i class="fa fa-car fa-2x"></i>

<i class="fa fa-car fa-3x"></i>

<i class="fa fa-car fa-4x"></i>

<i class="fa fa-car fa-5x"></i> [code end]

• The output will look like below.

Adding Animated Icons:

• To rotate the icon, fa-spin and icon will need to use fa-pulse to rotate in 8 steps. See how to do below -

[code start] <i class="fa fa-spinner fa-spin"></i>

<i class="fa fa-circle-o-notch fa-spin"></i>

<i class="fa fa-refresh fa-spin"></i>

<i class="fa fa-cog fa-spin"></i>

<i class="fa fa-spinner fa-pulse"></i> [code end]

• The output will look like below.

Adding Stacked Icons:

• Here the fa-stack is able to make the size of the icon smaller by the main class and fa-stack-1x and fa-stack-2x and the icon color can be changed through fa-inverse. See below -

[code start] <span class="fa-stack fa-lg">

  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span> [code end]

• The output will look like below.

Fixed Width Icons Adding:

• After the icon it will be added to fa-fw. Setting the size of these icons. See below -

[code start] <div class="list-group">

  <a href="#" class="list-group-item"><i class="fa fa-home fa-fw"></i> Home</a>
  <a href="#" class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
  <a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i> Applications</a>
  <a href="#" class="list-group-item"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div> [code end]

This way you can add all kinds of icons to your blog in different styles. The latest version of Font Awesome Icons 4.5.0 contains 605 types of icons. With the update of Style Sheet you can also use icons on all of them.