The best way to add and use Font Awesome icons on Blogger Blog.

Scroll Down and click on Go to Link for destination

Congrats! Link is Generated

In order to decorate the appearance of the blog site or even web page, you may use font awesome as option alternatives, furthermore, it doesn't make loading our own blog site to get slower when we install fonts awesome on the blog site or even web page.
Little explanation of those features is usually examine in addition to recognized as follows:

1. Login to your blogger panel admin

2. Click On Template » Edit HTML

3. Find this code Ctrl+F  ]]></head>

4. Then add the following CSS script just above the code ]]></head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

5. Add script HTML/Javascript where you want to display it on the page html. see an example below:
fa-camera-retro.way of writing:

<i class="fa fa-camera-retro"></i> fa-camera-retro

Enlarge Size

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Fixed Width Icons

  Home
  Library
  Applications
  Settings

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

List Of Icons

• List icons
• can be used
• as bullets
• in lists

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

Animated Spinner
To make a spinning icon , such as loading animation using code fa-spin

<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>

Rotated & Flipped
Icons can also be rotated to determine the degree of rotation , can also be reversed vertically or horizontally.

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

Fonts Awesome 4.3.0[images source:fortawesome.github.io]

For more Information Please Visit Font Awesome Website
Good Luck.

Source: fortawesome.github.io/Font-Awesome/

Go to Link