Cara Menggunakan Font Awesome Icons Di Blogger
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 gampang digunakan dan tidak berat.
Apa itu Font-Awesome Icons?
Font Awesome ialah font ikonik dan merupakan belahan dari pengembangan Bootstrap (Twitter). Icon-icon yang dipakai berbasis gambar vector yang sanggup diatur ukurannya sesuai ukuran font (Scalable Vector Graphic). Ikon-ikon ini bisa dikostumisasi sedemikian rupa (dengan styling) dan dipakai oleh website apa saja, termasuk pada template Blogger. Ukurannya sangat kecil, mudah dikostumisasi, gampang dipakai dengan banyak sekali 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, simpel 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 gres. Akibatnya, apabila Font-Awesome menambahkan icon gres, anda tidak bisa memanggilnya.
Oleh alasannya adalah itu, saya sarankan sahabat 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 ketika ini ialah:
<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 pecahan 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 sanggup memakai ikon font awesome ini di mana saja. Sebagai contoh, saya menggunakannya di belahan sajian.
Formula dari memunculkan font awesome ini yaitu 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
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 gres.
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.
Contoh-pola Penggunaannya
Contoh Heading Kamera
<h3><i class="fa fa-camera-retro"></i> Contoh Heading Kamera</h3>
Di dalam Link
<a href="http://buka-rahasia.blogspot.com/" target="_blank"><i class="fa fa-link"></i> Di dalam Link</a>
Next, saya akan share aneka macam modifikasi-nya diadaptasi dengan fungsi Font-Awesome untuk elemen-elemen layout tertentu. That's it for now. :)
© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.
Belum ada Komentar untuk "Cara Menggunakan Font Awesome Icons Di Blogger"
Posting Komentar