Cara Pasang Plugin Font Awesome CSS3 di Blog

Font / Icon Awesome merupakan kumpulan icon dan tombol yang berbasis font. Artinya, ketika sobat membutuhkan ikon di blog, tidak lagi menggunakan gambar / image yang tentunya akan lebih mempercepat loading blog sobat.

Untuk bisa menggunakan Font Awesome ini, sobat harus menyimpan CSSnya di atas </head>

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

Berikut Cara Menggunakan Font Awesome

Untuk menggunakan Font Awesome, sobat harus menambahkan tag

<i>

kemudian class nya gunakan nama icon.

cara penulisannya :

cara penulisannya :

Memperbesar Ukuran

Bordered & Pulled Icons

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.

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.

Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-muted untuk membuat ikon menjadi warna muda.

Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-muted untuk membuat ikon menjadi warna muda.

Animated Spinner

Untuk membuat ikon berputar, seperti animasi loading gunakan kode icon-spin bagus digunakan pada icon-spinner dan icon-refresh

Ini contoh icon-spinner yang diputar.

See also: PERTAMAX!! - Responsive HTML5 Blogger Template

 Ini contoh <code>icon-spinner</code> yang diputar.

Rotated & Flipped

Ikon juga dapat diputar dengan menentukan derajat putaran, juga bisa dibalik secara vertikal atau horizontal.

ikon normal
ikon diputar 90 derajat
ikon diputar 180 derajat
ikon diputar 270 derajat
ikon dibalik secara horizontal
ikon dibalik secara vertikal

ikon normal
  ikon diputar 90 derajat
  ikon diputar 180 derajat
  ikon diputar 270 derajat
  ikon dibalik secara horizontal
  ikon dibalik secara vertikal

Stacked Icons

Ikon juga dapat ditumpuk, Gunakan kode icon-stack sebelum tag ikon, dan kode icon-stack-base sebagai background / di bawah.

icon-twitter di atas icon-check-empty
icon-flag di atas icon-circle

icon-twitter di atas icon-check-empty 

icon-flag di atas icon-circle

Button

Icon juga dapat diterapkan pada button / tombol.

<ul class="button"> <li><a class="btn1" href="#">
See also: Advertising for Free

 Reload</a></li> <li><a class="btn2" href="#">
 Checkout</a></li> <li><a class="btn2" href="#">
 Info</a></li> <li><a class="btn1" href="#">
 Delete</a></li> </ul>

Bukan hanya pada button, icon Font Awesome ini bisa disimpan di berbagai tempat, seperti menu, menu dropdown, form, dan-lain-lain...

Penambahan Efek

Ikon Font Awesome juga bisa dikombinasikan dengan efek yang lainnya, seperti rotation pada contoh di bawah, silahkan arahkan mouse pada logo twitter di bawah ini :

Untuk CSS dan HTMLnya silahkan diacak2 sendiri sob.... Semoga bermanfaat, dan slamat berkreasi....