Latest News

Cara Menggunakan Font Awesome Icons di Blogger

Hasil gambar untuk fontawesome

Trend desain website dan blog terus berkembang. Di antaranya musim 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 populer lantaran bersifat CSS toolkit, sehingga mudah digunakan dan tidak berat.

Apa itu Font-Awesome Icons?


Font Awesome ialah font ikonik dan merupakan adegan dari pengembangan Bootstrap (Twitter). Icon-icon yang digunakan berbasis gambar vector yang mampu diatur ukurannya sesuai ukuran font (Scalable Vector Graphic). Ikon-ikon ini mampu dikostumisasi sedemikian rupa (dengan styling) dan digunakan oleh website apa saja, termasuk pada template Blogger. Ukurannya sangat kecil, mudah dikostumisasi, mudah dipakai dengan banyak sekali modifikasi sesuai platform, dan mampu diatur ukurannya dengan tampilan resolusi yang tetap baik. Desainnya sangat profesional sehingga membuat layout tampak elegan. Maka Font-Awesome mampu 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 mampu menggunakan library font-awesome (CSS) dari CDN Font-Awesome. Kaprikornus 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 mampu memanggilnya.

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

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

Dan external link untuk memanggil stylesheetnya hingga ketika 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 adegan mana saja asal masih di dalam tag itu. Tapi biar mudah dan cepat dipanggil terlebih dahulu, terutama apabila sahabat pakai custom fonts, letakkan di adegan 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 mampu menggunakan ikon font awesome ini di mana saja. Sebagai contoh, saya menggunakannya di adegan menu.

Formula dari memunculkan font awesome ini ialah 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 banyak sekali ikon, gunakan halaman ini sebagai cheatsheet lengkapnya. Bookmark biar mudah diakses kedepannya.

Note: untuk penerapan pada adegan post, gunakan mode HTML pada ketika menulis/edit. Jika dikembalikan ke "compose", sahabat tidak akan melihat apa-apa. Tapi jangan hingga terhapus tidak sengaja. Sobat mampu melihat kesannya 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 biar tidak bertubrukan. Ingat, tulis atau gunakan kodenya ketika menulis dalam mode HTML. Untuk menghindari autoformat Blogger yang kadang kala menghapus spasi yang dibuat dengan kunci keyboard "space". Gunakan  code &nbsp;. Contoh
<i class="fa fa-home"></i>&nbsp;teks-teks.
Agar lebih lebar, tambahkan &nbsp; baru.
  teks-teks.
Secara umum, warna dan ukuran icon akan menyesuaikan dengan CSS yang menaungi elemen yang berada bersamanya. Kaprikornus untuk ketika 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>&nbsp;&nbsp;Contoh Heading Kamera</h3>

  Di dalam Link

<a href="http://tips-trick.com/" target="_blank"><i class="fa fa-link"></i>&nbsp;&nbsp;Di dalam Link</a>

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