Cara Memasang Dan Menggunakan Font Awesome di Blog

Bloggerisn - Cara Memasang Font Awesome di Blog - Font Awesome adalah kumpulan icon dan tombol yang berbasis pada text atau font. Jadi, ketika sobat membutuhkan ikon di blog, sobat perlu lagi repot menyisipkan gambar yang tentunya akan lebih mempercepat blog sobat.

Untuk memasang Font Awesome pada blog sobat, Sobat harus Menyimpan kode CSS dibawah ini tepat diatas kode </head>

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

Cara Menggunakan Font Awesome

Untuk menggunakan Font Awesome, sobat harus menambahkan tag <i> kemudian class nya gunakan nama icon

LIST LENGKAP FONT AWESOME

cara penulisannya :

<i class="fa fa-play"></i>

cara penulisannya :

<i class="fa fa-pause"></i>

Memperbesar Ukuran

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

Bordered & Pulled Icons

Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan fa-border untuk membuat kotak diluar icon bendera. Ini hanya sekedar contoh, untuk lebih variatif silahkan dicoba sendiri.

<i class="fa fa-smile-o-left fa-3x pull-left icon-border"></i>Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-border untuk membuat kotak diluar icon bendera.  Ini hanya sekedar contoh, untuk lebih variatif silahkan dicoba sendiri.

Memasang Animasi

   Ini contoh fa fa-spinner yang diputar.

<i class="fa fa-spinner fa-spin fa-3x"></i> Ini contoh fa fa-spinner yang diputar.

Rotated & Flipped

Ikon Font Awesome juga dapat Sobat putar dengan menentukan derajat putar, dan Sobat juga bisa membaliknya secara vertikal maupun horizontal.

  ikon normal

  ikon diputar 90 derajat

  ikon diputar 180 derajat

  ikon diputar 270 derajat

  ikon dibalik secara horizontal

  ikon dibalik secara vertikal

<i class="fa fa-bolt"></i> : ikon normal
<i class="fa fa-bolt fa-rotate-90"></i> : ikon diputar 90 derajat
<i class="fa fa-bolt fa-rotate-180"></i> : ikon diputar 180 derajat
<i class="fa fa-bolt fa-rotate-270"></i> : ikon diputar 270 derajat
<i class="fa fa-bolt fa-flip-horizontal"></i> : ikon dibalik secara horizontal
<i class="fa fa-bolt fa-flip-vertical"></i> : ikon dibalik secara vertikal

Button

Sobat juga dapat menerapkan ikon pada tombol / button.

Live Demo

Download

<div id="wrap">
<a href="#" class="btn" rel="nofollow" target="_blank">Live Demo <i class="fa fa-paper-plane"></i></a>

<a href="#" class="btn down" rel="nofollow" target="_blank">Download <i class="fa fa-download"></i></a>
</div> 

Ikon Awesome juga dapat ditambahkan di beberapa berbagai tempat, seperti menu, menu dropdown, form, widget, dan lain-lain.

Nah itulah Cara memasang dan menggunakan Font Awesome, semoga bermanfaat dan selamat berkreasi ya sobat blogger.

http://bloggerisn.blogspot.com/2015/05/cara-memasang-dan-menggunakan-font-awesome-di-blog.html

Suka Artikel ini? Bagikan

Suka Dengan Artikel Diatas? Bagikan Gratis:

• Tweet
• Share
• Share
• Share
• Share

Irham Satriawan

Saya adalah seorang yang sangat menyukai design dan juga dunia internet sobat bisa memanggil saya (CT), dengan blog ini semoga saya akan berbagi pengalaman saya kepada sobat semua.

Artikel Menarik Lainnya