Cara Menggunakan Font Awesome Icons Di Blogger

Trend konsep situs web dan blog terus berkembang. Di antaranya demam isu flat design, yang mensyaratkan suatu website/blog tampil secara berkelas tanpa bagian yang menonjol dan berjejal. Website yang lazimnya dihiasi dengan aneka macam 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 terkenal karena bersifat CSS toolkit, sehingga mudah dipakai dan tidak berat.

Apa itu Font-Awesome Icons?

Font Awesome yakni font ikonik dan ialah bab dari pengembangan Bootstrap (Twitter). Icon-icon yang dipakai berbasis gambar vector yang bisa dikontrol ukurannya sesuai ukuran font (Scalable Vector Graphic). Ikon-ikon ini dapat dikostumisasi sedemikian rupa (dengan styling) dan dipakai oleh situs web apa saja, tergolong pada template Blogger. Ukurannya sungguh kecil, mudah dikostumisasi, mudah dipakai dengan aneka macam modifikasi sesuai platform, dan dapat dikontrol ukurannya dengan performa resolusi yang tetap baik. Desainnya sungguh profesional sehingga menghasilkan layout terlihat elegan. Maka Font-Awesome dapat ditebak menjadi dambaan setiap web designer maupun developer.

Koleksi icon Font-Awesome terus bertambah, sehingga semua keperluan icon akan terus terpenuhi.
Ringan, mudah dikostumisasi.
Kita dapat memakai library font-awesome (CSS) dari CDN Font-Awesome. Makara tidak perlu sibuk-sibuk upload dan host sendiri.
Gratis. :D

Ada 2 tahap untuk memakai icon Font Awesome di Blogger:

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

Memasang dan Memanggil External Stylesheet Font-Awesome

Beberapa panduan lain meminta pembaca untuk memasang stylesheet yang sudah baku, sehingga di saat font-awesome diupdate, maka stylesheet yang dipakai tidak akan mengandung icon baru. Akibatnya, apabila Font-Awesome menyertakan icon baru, anda tidak bisa memanggilnya.

Oleh alasannya yakni itu, saya sarankan kawan tetap update dengan link stylesheet yang dipakai oleh Font-Awesome dan rajin-rajinlah untuk menyimak update modern di sana.

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

Dan external link untuk mengundang stylesheetnya hingga di sekarang 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 bab mana saja asal masih di dalam tag itu. Tapi biar mudah dan cepat diundang apalagi dahulu, utamanya apabila kawan pakai custom fonts, letakkan di bab 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 percaya terpasang dengan benar, save template.

Cara Memasang dan Menggunakan Snippet Font Awesome

Sobat dapat memakai ikon font awesome ini di mana saja. Sebagai contoh, saya menggunakannya di bab menu.

Formula dari menimbulkan font awesome ini yakni dengan memakai tag <i> dan menyertakan class utama (fa) dan class untuk mengundang ikon tertentu.

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

Contoh di atas dipakai untuk memperlihatkan ikon

Untuk menyaksikan library aneka macam ikon, gunakan halaman ini selaku cheatsheet lengkapnya. Bookmark biar mudah diakses kedepannya.

Note: untuk penerapan pada bab post, gunakan mode HTML pada di saat menulis/edit. Jika dikembalikan ke "compose", kawan tidak akan menyaksikan apa-apa. Tapi jangan hingga terhapus tidak sengaja. Sobat dapat menyaksikan risikonya sehabis diterbitkan atau via "preview"/"pratinjau. Ini juga berlaku pada widget HTML/Javascript.

Untuk penggunaan icon mendampingi teks, umpamanya pada menu, heading, dan sejenisnya, gunakan spasi biar tidak bertubrukan. Ingat, tulis atau gunakan kodenya di saat menulis dalam mode HTML. Untuk menyingkir dari autoformat Blogger yang adakala meniadakan spasi yang dibentuk 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 bagian yang berada bersamanya. Makara untuk di saat ini, saya kira tidak begitu dipentingkan styling dengan bentuk berlainan dan akan saya share di post berlainan pula.