Cara Menggunakan Font Awesome Icons di Blogger

cara memasang ikon font awesome di blog.

Trend desain website dan blog terus berkembang. Di antaranya trend flat design, yang mensyaratkan sebuah website/blog tampil secara elegan tanpa elemen yang menonjol dan berjejal. Website yang biasanya dihiasi dengan berbagai gambar ikon juga beralih ke penggunaan ikon berbasis font, sebut saja Glyphicons, Foundation Icon Fonts, IcoMoon, Fontello, dll. Yang terakhir, yang lagi ngetrend: Font Awesome Icons. Platform icon ini cepat populer lantaran bersifat CSS toolkit, sehingga mudah digunakan dan tidak berat.

Apa itu Font-Awesome Icons?

Font Awesome adalah font ikonik dan merupakan bagian dari pengembangan Bootstrap (Twitter). Icon-icon yang digunakan berbasis gambar vector yang bisa diatur ukurannya sesuai ukuran font (Scalable Vector Graphic). Ikon-ikon ini bisa dikostumisasi sedemikian rupa (dengan styling) dan digunakan oleh website apa saja, termasuk pada template Blogger. 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. Maka Font-Awesome bisa ditebak menjadi dambaan setiap web designer maupun developer.

Koleksi icon Font-Awesome terus bertambah, sehingga semua kebutuhan icon akan terus terpenuhi.
Ringan, mudah dikostumisasi.
Kita bisa menggunakan library font-awesome (CSS) dari CDN Font-Awesome. Jadi tidak perlu repot-repot upload dan host sendiri.
Gratis. :D

Ada 2 tahap untuk menggunakan icon Font Awesome di Blogger:

Menambahkan link stylesheet eksternal dari Font-Awesome.
Memasang Snippet Font Awesome

Memasang dan Memanggil External Stylesheet Font-Awesome

Beberapa tutorial lain meminta pembaca untuk memasang stylesheet yang sudah baku, sehingga ketika font-awesome diupdate, maka stylesheet yang digunakan tidak akan mengandung icon baru. Akibatnya, apabila Font-Awesome menambahkan icon baru, anda tidak bisa memanggilnya.

Oleh karena itu, saya sarankan sobat tetap update dengan link stylesheet yang digunakan oleh Font-Awesome dan rajin-rajinlah untuk menyimak update terbaru di sana.

Untuk saat ini, Font-Awesome berada pada versi 4.2.0. dengan 479 ikon.

Dan external link untuk memanggil stylesheetnya hingga saat ini adalah:

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

Untuk terus update dengan stylesheet terbaru, pantau halaman ini. Saya juga akan terus update stylesheet di atas apabila mengalami upgrade versi.

Sekarang, kita beranjak ke cara memasangnya:

a. Buka dashboard > template > edit HTML. Letakkan stylesheet eksternal di atas ke dalam <head>. Boleh di bagian mana saja asal masih di dalam tag itu. Tapi agar mudah dan cepat dipanggil terlebih dahulu, terutama apabila sobat pakai custom fonts, letakkan di bagian yang lebih atas. Contoh:

<head>
...
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
...
...
...
...
</head>

b. Setelah yakin terpasang dengan benar, save template.

Cara Memasang dan Menggunakan Snippet Font Awesome

Sobat bisa menggunakan ikon font awesome ini di mana saja. Sebagai contoh, saya menggunakannya di bagian menu.

Formula dari memunculkan font awesome ini adalah dengan menggunakan tag <i> dan menambahkan class utama (fa) dan class untuk memanggil ikon tertentu.

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

Contoh di atas digunakan untuk menampilkan ikon

Untuk melihat library berbagai ikon, gunakan halaman ini sebagai cheatsheet lengkapnya. Bookmark agar mudah diakses kedepannya.

Note: untuk penerapan pada bagian post, gunakan mode HTML pada saat menulis/edit. Jika dikembalikan ke "compose", sobat tidak akan melihat apa-apa. Tapi jangan sampai terhapus tidak sengaja. Sobat bisa melihat hasilnya setelah diterbitkan atau via "preview"/"pratinjau. Ini juga berlaku pada widget HTML/Javascript.

Untuk penggunaan icon mendampingi teks, misalnya pada menu, heading, dan sejenisnya, gunakan spasi agar tidak bertubrukan. Ingat, tulis atau gunakan kodenya saat menulis dalam mode HTML. Untuk menghindari autoformat Blogger yang kadang-kadang menghapus spasi yang dibuat dengan kunci keyboard "space". Gunakan code  . Contoh

<i class="fa fa-home"></i> teks-teks.

Agar lebih lebar, tambahkan   baru.

teks-teks.

Secara umum, warna dan ukuran icon akan menyesuaikan dengan CSS yang menaungi elemen yang berada bersamanya. Jadi untuk saat ini, saya kira tidak begitu dipentingkan styling dengan bentuk berbeda dan akan saya share di post berbeda pula.