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 &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. Jadi untuk saat 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://buka-rahasia.blogspot.com/" target="_blank"><i class="fa fa-link"></i>&nbsp;&nbsp;Di dalam Link</a>

Next, saya akan share berbagai modifikasi-nya disesuaikan 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.

Cara Menggunakan Font Awesome Icons di Blogger
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 5 Comment(s):

Khoirun Naim said...

ngambil pertamax disni ya gan ,
sekalian numpang nyimak . buat nambah pengetahuan blog :)

Unknown said...

silahkan sob

Anonymous said...

nyimak aja, salam kenal

Unknown said...

dulu di template blog saya ada gambar2 icon seperti ini om dan saya baru tahu ternyata ini namanya font awesome icons :D thanks om

Unknown said...

wah saya juga pengguna font awesome dan sudah terpasang pada website saya mas hehe..

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap