Cara Memasang dan Menggunakan Font Awesome di Blogger
Dengan memasang Font Awesome Icons di template Blogger, kita bisa membuat ikon yang menarik dengan hanya menggunakan teks sehingga tidak terlalu mempengerahui kecepatan loading dibandingkan memakai banyak gambar ikon. Font Awesome adalah font ikonik dan merupakan bagian dari pengembangan Bootstrap. Icon-icon yang digunakan berbasis gambar vector yang bisa diatur ukurannya sesuai ukuran font.

Ikon-ikon Font Awesome ini bisa dikostumisasi sedemikian rupa dan dapat digunakan oleh website apa saja. Ukurannya sangat kecil, mudah dikostumisasi, mudah dipakai dengan berbagai modifikasi sesuai platform, dan bisa diatur ukurannya dengan tampilan resolusi yang tetap baik. Desainnya sangat profesional sehingga membuat layout tampak elegan.

Dengan menggunakan Font Awesome, antarmuka website jadi lebih mudah diakses. Keuntungan lain dengan adanya Font Awesome kamu bisa membuat tampilan web kamu lebih keren dengan adanya gambar-gambar ikon yang bisa menambah daya tarik web/blog anda.

Cara Memasang Font Awesome di Blogger

Login ke Blogger anda kemudian masuk ke Edit Html template anda. Tambahkan link berikut dibawah kode <head> atau diatas kode </head> atau diatas kode </body>.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
Save template.

Cara Menggunakan Font Awesome di Blogger

Kamu bisa menggunakan Font Awesome ini dimana saja, misalanya di bagian menu ataupun di dalam postingan. ( Untuk melihat library berbagai ikon, gunakan halaman ini) Untuk memunculkan font awesome ini adalah dengan menggunakan tag <i> dan menambahkan class utama (fa) dan class untuk memanggil ikon tertentu.

Contoh dibawah ini saya mengambil icon dari Font Awesome "home"
<i class="fa fa-home"></i>
Dan Hasilnya:


Untuk mengganti ukuran atau memperbesarnya kamu dapat mencoba fa-lg (33% increase), fa-2x, fa-3x, fa-4x, dan fa-5x . contohnya
<i class="fa fa-home fa-lg"></i>  contoh ditambah : fa-lg
<i class="fa fa-home fa-2x"></i> contoh ditambah fa-2x
<i class="fa fa-home fa-3x"></i> contoh ditambah fa-3x
<i class="fa fa-home fa-4x"></i> contoh ditambah fa-4x
<i class="fa fa-home fa-5x"></i> contoh ditambah fa-5x
Dan hasilnya:

contoh ditambah : fa-lg
contoh ditambah fa-2x
contoh ditambah fa-3x
contoh ditambah fa-4x
contoh ditambah fa-5x

Untuk pengaturan warna, ukuran dan style lainnya Anda juga bisa menggabungkan class CSS yang sesuai. Misalnya :
<i class="fa fa-comments-o fa-4x"></i> contoh ditambah fa-4x
<style>
.fa-comments-o {padding:0;  margin:0; float:left;padding:5px 0px; color:#F2784B;}
}
</style>
Dan hasilnya:



Untuk menerapkan pada postingan, sebaiknya kamu menggunakan mode "HTML" bukan mode "compose". dan saya sering menggunakan browser chrome agar lebih mudah penulisannya. Ini juga berlaku pada widget HTML/Javascript.

Menampilkan Ikon Font Awesome melalui CSS content

Nah kali ini kita akan menambahkan kode dalam CSS (untuk list daftar iconnya lihat halaman ini). Contoh, misal kamu ingin menambahkan gambar ikon pada bagian judul gadget di sidebar blog. Untuk memasang ikon Font Awesome sebelum judul Artikel Populer pada sidebar Anda tersebut, maka Anda bisa gunakan kode CSS seperti berikut :
.sidebar h2:before { content: "\f02c";
  font-family: FontAwesome;color:#F2784B;margin-right: 8px;
  display: inline-block;
  line-height: 1em; }
Kode ikon disini adalah "\f02c" dari [&#xf02c;] . Kunci dari cara ini, selain dari penggunaan pseudo class before Anda juga harus selalu menggunakan font-family : FontAwesome. Dan juga jika diperlukan tambahkan property display dan line-height seperti contoh diatas, agar fungsi ikon tersebut bisa bekerja dengan baik. atau kamu bisa menggunakan ukuran px untuk mengatur besarnya ikon misalnya: font-size: 18px; selebihnya silahkan atur sendiri sesuai selera kamu.
1 Komentar untuk "Cara Memasang dan Menggunakan Font Awesome di Blogger"