Font Awesome : How to use Web Icons in blogger CMS

Font Awesome : How to use Web Icons in blogger CMS

Add Comment

http://www.99lime.com/site/assets/files/1041/font-awesome.629x0.png


Web Based icons are far more better option to use in navigation or other places instead of images based icons. Web based icons are far more speedy to load and looks creative on our site or blog. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. In a single collection, Font Awesome is a pictographic language of web-related actions.

Original Owner/Desginer :- http://fortawesome.github.io/Font-Awesome/

Demo : The Icons have been used in the Main Navigational Menus of this blog (Desktop Version).

Font Awesome has following Stunting features avalible ;

  1. In a single collection, Font Awesome is a pictographic language of web-related actions. 
  2. Fewer compatibility concerns because Font Awesome doesn't require JavaScript.  
  3. Scalable vector graphics means every icon looks awesome at any size. 
  4. Font Awesome is completely free for commercial use.
  5. Easily style icon color, size, shadow, and anything that's possible with CSS. 
  6. Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.  
And much more features

How to install Font Awesome to Blogger blog

1. Open Template Editor, edit HTML
2. Paste the below to links with in your Header section (i mean <head>....</head>)
<link href='http://lipis.github.io/bootstrap-social/assets/css/font-awesome.css' rel='stylesheet'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

Learn How to use Font Awesome :- 

font Awesome Code looks like this 
<i class="fa fa-twitter"></i>
fa-twitter in above code is the actual part that shows the respective icon we want. if you change it with fa-facebook then facebook icon will appear and so on. here are other examples for it.

1.  fa-wordpress for WordPress Icon and code looks  <i class="fa fa-wordpress"></i>
2. fa-windows for Windows icon and code looks like <i class="fa fa-windows"></i>

And Outcome :Examples using Code

<a class="fb"><i class="fa fa-facebook">Facebook</i></a>
Facebook
Twitter
Google+

3. so on, refer to below link for more icons short-codes (fa-yourcode)

and all these types of icons short code you can use can be found here

Here are another Examples for Inserting these codes :- 
  

<li><a class="btn btn-block btn-social btn-twitter">
    <i class="fa fa-twitter"></i> Follow on Twitter
  </a></li>
you can place it like this in your HTML code .
 *The above code is just for the demonstration.

Thankuh for reading this post. Keep your problem in the comment area.

Share this:

ABOUT THE AUTHOR

Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible

0 comments:

Post a Comment

Subscribe to: Post Comments ( Atom )