FONTS: FONT AWESOME COMPLETE TUTORIAL

Font Awesome's logo belongs to fontawesome.io and created and owned by Dave Gandy.

FONT AWESOME INSTALL

Font Awesome have lot of features, such as moving icon or nicely font, nowadays peoples who want to owns a blog or website can use this Font Awesome for free. This pages will displaying about how to implement Font Awesome to our blog / website.

INLINE / PARSE MODE:

This is the original script, search this before you adding this to your site's template. Do not have double script.

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

The default locations of Font Awesome usually located above code </head>.
FONT AWESOME can be putted above code </body>.

Find that code and then replace with this. So the font awesome can be load in Async Mode. Your site will be faster when the script can be load Asynchronus. But not all of them can be applied!

MAKING THE STYLESHEET LOADED IN ASYNC / ASYNCHRONOUS MODE

Then, I found this code at Adhy's blog that's explaining this stylesheet (only the *.css) can be loaded in Async mode which is effects to better speed for website.

Async mode do not need to save the .CSS Style highlight.js in our site, so loading due to load asynchronously would be a great option.

Input this kode above </body> or usually located in footer.php for Wordpress.:

<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

COMBINES BLOCKQUOTE FUNCTION WITH HIGHLIGHTER
COMBINES ALL CSS + ASYNCHRONOUS MODE

EXAMPLE USE OF FONT AWESOME

CORRECT !!!

CORRECT
 CORRECT

WRONG !!!

Here's some documentations, but if using blogspot's blogger, sometimes it can't be done perfectly:

• HTML5 doesn’t need self-closing tags />
• HTML5 doesn’t need the type attribute on stylesheets
• HTML5 doesn’t need the type attribute on JavaScript
• HTML5 doesn’t need the media attribute on [most] stylesheets
• The id attribute on stylesheets isn’t necessary
• EditURI and wlwmanifest links aren’t neccessary
• The generator meta tag isn’t necessary
• There shouldn’t be inline CSS for the recent comments widget

BUTTON CLASS

<a class="btn btn-default btn fa-lg" href="//LINK.COM/" target="_blank"> EXAMPLE </a>

<a class="btn btn-default btn fa-2x" href="//LINK.COM/" target="_blank"> EXAMPLE </a>

COMPANY PROFILE

+012 356 789
id@email.com
Building Centre
Central Park 88, Manhattan
New York

<h3>
COMPANY PROFILE</h3>
+012 356 789
id@email.com
Building Centre
Central Park 88, Manhattan
New York

ABOUT ME WITHOUT WIDGET

NAME

DESCRIPTIONS

EXAMPLE

<div class="about_a text-center">
<img src="//IMAGE.JPG" alt="160x160" />

NAME 
DESCRIPTIONS


<a class="btn" href="//LINK.COM/" target="_blank"> SIGN UP </a>

</div>

SOCIAL BUTTONS

<div class="social-links-widget cf">
<a href="#" target="_blank" class="social-links-facebook"></a>
<a href="#" target="_blank" class="social-links-gplus"></a>
<a href="#" target="_blank" class="social-links-pinterest"></a>
<a href="#" target="_blank" class="social-links-dribbble"></a>
<a href="#" target="_blank" class="social-links-instagram"></a>
<a href="#" target="_blank" class="social-links-twitter"></a>
<a href="#" target="_blank" class="social-links-youtube"></a>
</div>

SEARCH BOX

<form role="search" method="get" class="search-form" action="/search">
<label>
Search for:
<input type="search" class="search-field" placeholder="Search …" value="" name="q" title="Search for:" />
</label>
<input type="submit" class="search-submit" value="Search" />
</form>
<div class="clear"></div>

DETAILS

Home
Trust
About Us
Verify
Deposits
Company
Disclaimer
F.A.Q.
Sitemap
Signals
World Clock
Alarm
Photoshop Online
Softwares

<div class="list-group">
<a class="list-group-item" href="#" rel="nofollow"> Home</a> 
<a class="list-group-item" href="#"> Trust</a> 
<a class="list-group-item" href="#"> About Us</a> 
<a class="list-group-item" href="#"> Verify</a> 
<a class="list-group-item" href="#"> Deposits</a> 
<a class="list-group-item" href="#"> Company</a> 
<a class="list-group-item" href="#"> Disclaimer</a> 
<a class="list-group-item" href="#"> F.A.Q.</a> 
<a class="list-group-item" href="#"> Sitemap</a> 
<a class="list-group-item" href="#"> Signals</a> 
<a class="list-group-item" href="#"> World Clock</a> 
<a class="list-group-item" href="#"> Alarm</a> 
<a class="list-group-item" href="#"> Photoshop Online</a> 
<a class="list-group-item" href="#"> Softwares</a> 
</div>

READ TOO: Automatic applying link with icon..

INTRODUCING BLOGGER