Kostumisasi Font Icon Awesome V.4.0.3

Setelah sebelumnya update font awsesome versi 3.2.1 maka kali ini sekalian memperbarui penggunaan font awesome versi 4.0.3 berikut cara kostumisasi baik pewarnaan maupun pengaturan posisinya untuk blog metro ui style. Jika anda belum menggunakan versi ini silakan install kodenya :

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

EFEK ANIMASI

 <i class="fa fa-bell fa-2x fa-spin"></i>
 <i class="fa fa-bell fa-3x fa-spin"></i>
 <i class="fa fa-bell fa-4x fa-spin"></i>

EFEK WARNA

 <i class="fa fa-twitter-square"></i>
 <i class="fa fa-facebook-square"></i>
 <i class="fa fa-linkedin-square"></i>

EFEK BORDER

<i class="fa fa-twitter-square fa-border"></i>
<i class="fa fa-facebook-square fa-border"></i>
<i class="fa fa-linkedin-square fa-border"></i>

BUTTON

CSS BUTTON

i.fa-cogs {float:center;padding:10px 92px 10px 92px;background:#34495e;border-bottom:5px solid #2c3e50;border-radius:4px;
font-size: 36px;
color:#fafafa;
}
i.fa-camera {float:center;padding:10px 92px 10px 92px;background:#1abc9c;border-bottom:5px solid #16a085;border-radius:4px;
font-size: 36px;
color:#fafafa;
}
i.fa-bars {float:center;padding:10px 92px 10px 92px;background:#2ecc71;border-bottom:5px solid #27ae60;border-radius:4px;
font-size: 36px;
color:#fafafa;
}
i.fa-calendar {float:center;padding:10px 92px 10px 92px;background:#9b59b6;border-bottom:5px solid #8e44ad;border-radius:4px;
font-size: 36px;
color:#fafafa;
}

Demikian sedikit ulasan tentang kostumisasi font awesome v.4.0.3.
Enjoy Blogging

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku