Cara Menggunakan Ikon Font Awesome di Blog

How to add and use Font Awesome icons on Blogger Blog - Font 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'/>

Cara Menggunakan Font Awesome

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

• LIST LENGKAP ICON FONT AWESOME

<i class="icon-google-plus-sign"></i>

<i class="icon-html5"></i>

Memperbesar Ukuran

<i class="icon-google-plus-sign"></i>
<i class="icon-google-plus-sign icon-large"></i>
<i class="icon-google-plus-sign icon-2x"></i>
<i class="icon-google-plus-sign icon-3x"></i>
<i class="icon-google-plus-sign icon-4x"></i>

Bordered & Pulled Icons

<i class="icon-flag icon-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.

<i class="icon-quote-left icon-4x pull-left icon-muted"></i>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

<i class="icon-spinner icon-spin icon-2x"></i> 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.

<i class="icon-shield"></i>&nbsp; ikon normal
<i class="icon-shield icon-rotate-90"></i>&nbsp; ikon diputar 90 derajat
<i class="icon-shield icon-rotate-180"></i>&nbsp; ikon diputar 180 derajat
<i class="icon-shield icon-rotate-270"></i>&nbsp; ikon diputar 270 derajat
<i class="icon-shield icon-flip-horizontal"></i>&nbsp; ikon dibalik secara horizontal
<i class="icon-shield icon-flip-vertical"></i>&nbsp; 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.

<span class="icon-stack">
<i class="icon-check-empty icon-stack-base"></i><i class="icon-twitter"></i></span><span style="margin-left: 8px;">icon-twitter di atas icon-check-empty
</span>
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i><i class="icon-flag icon-light"></i></span><span style="margin-left: 8px;">icon-flag di atas icon-circle
</span>

Button

Icon juga dapat diterapkan pada button / tombol.

• Reload
• Checkout
• Info
• Delete

<ul class="button">
<li><a class="btn1" href="#"><i class="icon-repeat"></i> Reload</a></li>
<li><a class="btn2" href="#"><i class="icon-shopping-cart icon-large"></i> Checkout</a></li>
<li><a class="btn2" href="#"><i class="icon-info-sign"></i> Info</a></li>
<li><a class="btn1" href="#"><i class="icon-trash icon-large"></i> 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 :


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