Now you can Subscribe using RSS

Submit your Email

Saturday, February 21, 2015

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

Irvan Dev

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

Irvan Dev / Author & Editor

I am Irvandev, I m a fairly easy blogger and it's, untill today My spouse and i still love writing and submitting articles for blog site "Blog Irvandev".

0 comments:

Post a Comment

Coprights @ 2016, Blogger Templates