Menggunakan Awesome Font di Blogspot

Cara menggunakan Awesome Font di Blogspot - Perkembangan Bootstrap mulai menarik diikuti (selama ini ane kemana aje? baru post hahaha < blogger ketinggalan jaman). Nah, karena banyaknya minat pembaca mengenai tema ini, maka di blog ini akan di bahas tentang bootstrap secara serial. Ya, kita belajar bareng lah sambil lihat perkembangannya. Untuk hal yang paling sederhana dulu, bagi temen-temen yang pengen menggunakan awesome font di blog.

Apa Itu Awesome Font?
Jika kalian sering twitteran maka kalian tidak akan asing dengan font ikonik ini. Font-font ini terdiri dari berbagai macam icon atau logo termasuk situs terkenal seperti facebook, google atau twitter. Dengan kata lain, jika biasanya saat menambahkan ikon di blog kita menggunakan image, maka sekarang kita bisa memanfaatkan awesome ikon ini. Loadingnya jadi lebih cepet.

Pemasangan Script
Tambahkan script berikut ini di atas </head>

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

Untuk membuat icon Facebook kodenya seperti berikut:

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

Ganti yang berwarna merah sesuai kebutuhan. Untuk membuat icon-icon yang lain, bisa dilihat list lengkapnya di: Daftar Lengkap Awesome Icon Untuk Blogspot

Ukuran Ikon
Ukutan ikon juga bisa disesuaikan, menggunakan kode:

<i class="icon-facebook"></i>
<i class="icon-facebook icon-large"></i>
<i class="icon-facebook icon-2x"></i>
<i class="icon-facebook icon-3x"></i>
<i class="icon-facebook icon-4x"></i>

Berurutan semakin ke bawah, semakin besar. Yang berwarna merah adalah kode yang ditambahkan untuk menyatakan ukuran.

Pull Icon/Floating
Untuk membuat ikon mepet ke kiri elemen, atau ke kanan elemen. Gunakan kode:

<i class="icon-facebook icon-4x pull-left"></i>

Yang akan tampil adalah ikon super besar dan mepet ke kiri elemen.

<i class="icon-facebook icon-2x pull-right"></i>

Yang akan tampil adalah ikon berukuran medium dan mepet ke kanan elemen.

Penambahan Garis Tepi / Border
Ikon ini juga bisa diberi garis tepi. Kodenya:

<i class="icon-facebook icon-border"></i>

Cara Memutar Icon
Ikon ini juga bisa diputar 90, 180 atau 270 derajat. Kodenya:

<i class="icon-facebook icon-rotate-90"></i>

<i class="icon-facebook icon-rotate-180"></i>

<i class="icon-facebook icon-rotate-270"></i>  

Flip Horizontal/Vertikal
Fungsi ini membuat ikon terbalik secara horizontal ataupun vertikal. Kodenya:

<i class="icon-facebook icon-flip-horizontal"></i>

<i class="icon-facebook icon-flip-vertical"></i>

Ikon Bergerak Memutar
Ikon juga bisa digerakkan memutar. Kodenya:

<i class="icon-facebook icon-spin"></i>

Information: Cara Menggunakan Awesome Font - Twitter Bootstrap