Add Font Awesome Use @Font Face in Blogger CSS

Are you use UI design in your blog? Sometime we need many plugin to aply that. I dont understand font awesome most popular too. May coz simple to apllied or another purpose to do it.

This is my way to apllied font awesome using @font face, and i was test in my mobile device as well work.

Font Awesome

In this May font awesome was at version 4.3.0 but in this version not well work in ie by font awesome and that is original explain. So we can use 3.2.1 version and this is my way :

Basic Font Awesome using Font Face

 @font-face {
  font-family: 'FontAwesome';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/font/FontAwesome.otf');
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome-ie7.css?#iefix') format('embedded-opentype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/font/fontawesome-webfont.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/font/fontawesome-webfont.ttf') format('truetype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/font/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal; }
[class^="icon-"],
[class*="icon-"] {
  font-family: FontAwesome;
  font-family: FontAwesome-webfont;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  *margin-right: 0.3em; }

Spesific Icon Font

.icon-twitter:before, .icon-mobile:before,
.icon-facebook:before,
.icon-google-plus:before {
  font-family: 'FontAwesome'; }
.icon-mobile:before {
  content: '\f10b'; }
.icon-twitter:before {
  content: '\f099'; }
.icon-facebook:before {
  content: '\f09a'; }
.icon-google-plus:before {
  content: '\f0d5'; }

Target Aplied Font Awesome

#footer .profile-icons {
  float: right;
  display: inline-block; }
#footer .profile-icon {
  margin-left: 13px; }
* p:last-child,
.sidebar :last-child {
  margin-bottom: 0; }

And this is HTML on Footer

<div class='full_width' id='footer'><!--[ div footer star ]-->
        <div class='profile-icons'>
              <a class='profile-icon icon-mobile' href='http://hypothesisdemo.blogspot.com?m=1'/>
            <a class='profile-icon icon-twitter' href='https://twitter.com/pearsonified'/>
            <a class='profile-icon icon-facebook' href='https://www.facebook.com/diythemes'/>
            <a class='profile-icon icon-google-plus' href='https://plus.google.com/u/0/110923553081534378300/'/>
        </div>
</div>

Conclution

We not use <link href> cos will critical on Google Page Speed Insights. See orange code, why doble coz different format to IE 7 and other browser. We not generate original CSS font awesome, because we under licence if we apply in our blog. So we can use another link on CDNJS and chose 3.2.1 version and put url by category svg, ttf, eot and much more. I hope this way as well work.

Ranking: 5

Facebook Twitter Google+ Stumble it LinkedIn