Cara Menggunakan Font Awesome Icons di Blogger

Trend desain website dan blog terus berkembang. Di antaranya isu terkini flat design, yang mensyaratkan sebuah website/blog tampil secara elegan tanpa elemen yang menonjol dan berjejal. Website yang biasanya dihiasi dengan banyak sekali 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 gampang digunakan dan tidak berat.

Apa itu Font-Awesome Icons?

Font Awesome ialah font ikonik dan merupakan bab dari pengembangan Bootstrap (Twitter). Icon-icon yang digunakan berbasis gambar vector yang dapat diatur ukurannya sesuai ukuran font (Scalable Vector Graphic). Ikon-ikon ini dapat dikostumisasi sedemikian rupa (dengan styling) dan digunakan oleh website apa saja, termasuk pada template Blogger. Ukurannya sangat kecil, gampang dikostumisasi, gampang digunakan dengan banyak sekali modifikasi sesuai platform, dan dapat diatur ukurannya dengan tampilan resolusi yang tetap baik. Desainnya sangat profesional sehingga menciptakan layout tampak elegan. Maka Font-Awesome dapat ditebak menjadi dambaan setiap web designer maupun developer.

Koleksi icon Font-Awesome terus bertambah, sehingga semua kebutuhan icon akan terus terpenuhi.
Ringan, gampang dikostumisasi.
Kita dapat memakai library font-awesome (CSS) dari CDN Font-Awesome. Kaprikornus tidak perlu repot-repot 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 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 dapat memanggilnya.

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

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

Dan external link untuk memanggil stylesheetnya hingga dikala 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 supaya gampang dan cepat dipanggil terlebih dahulu, terutama apabila teman 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 yakin 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 memunculkan font awesome ini ialah dengan memakai 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 banyak sekali ikon, gunakan halaman ini sebagai cheatsheet lengkapnya. Bookmark supaya gampang diakses kedepannya.

Note: untuk penerapan pada bab post, gunakan mode HTML pada dikala menulis/edit. Jika dikembalikan ke "compose", teman tidak akan melihat apa-apa. Tapi jangan hingga terhapus tidak sengaja. Sobat dapat melihat kesudahannya sesudah diterbitkan atau via "preview"/"pratinjau. Ini juga berlaku pada widget HTML/Javascript.

Untuk penggunaan icon mendampingi teks, contohnya pada menu, heading, dan sejenisnya, gunakan spasi supaya tidak bertubrukan. Ingat, tulis atau gunakan kodenya dikala menulis dalam mode HTML. Untuk menghindari autoformat Blogger yang adakala menghapus 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 elemen yang berada bersamanya. Kaprikornus untuk dikala ini, saya kira tidak begitu dipentingkan styling dengan bentuk berbeda dan akan saya share di post berbeda pula.

Contoh-contoh Penggunaannya

Contoh Heading Kamera

<h3><i class="fa fa-camera-retro"></i>  Contoh Heading Kamera</h3>

Di dalam Link

<a href=" /" target="_blank"><i class="fa fa-link"></i>  Di dalam Link</a>

Next, saya akan share banyak sekali modifikasi-nya diadaptasi dengan fungsi Font-Awesome untuk elemen-elemen layout tertentu. That's it for now. :)