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 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>


Komentar

Posting Komentar

Postingan populer dari blog ini

HummingBad alias Shedun Ancaman Baru Perangkat Android

Gambar
Beberapa waktu belakangan ini Android menjadi bulan-bulanan dari ancaman berbagai virus dan malware, wajar sih karena Android jadi salah satu platform OS yg paling banyak digunakan, nah ini ada satu ancaman keamanan lagi buat Android yaitu munculnya malware "HumiingBad" atau dikenal dengan "Shedun", kalo dibilang baru sih nggak juga ya soalnya sudah beberapa bulan yg lalu ancaman ini terdeteksi dan sudah menginfeksi lebih dari 10 juta ponsel android di seluruh dunia soub... Apa itu HummingBad? HummingBad adalah virus yang dapat didownload secara otomatis ke perangkat ponsel pintar ketika penggunanya mengunjungi website tertentu; atau yang lebih dikenal sebagai "drive-by-Download attack", makanya soub kita mesti lebih hati-hati kalo lagi browsing ye.... Sekali virus ini aktif di dalam ponsel pintar kita, malware ini mampu mendapatkan akses root untuk ponsel Android, beuh ngeri nggak tuh ?? Kemudian dapat menginstal aplikasi tambahan, memunculkan iklan dan m...
Baca selengkapnya

Spesifikasi dan harga Samsung galaxy J3 Prime

Gambar
Samsung Galaxy J3 Prime membawa banyak sekali perubahan jika dibandingkan dengan seri sebelumnya karena sudah menggunakan Frame metal dan Cover bermotive dengan bentang 5.0 inchi. Sementara itu untuk Softwarenya, Samsung Galaxy J3 Prime masih sama seperti seri pendahulunya yang menggunakan Os Marsmallow dengan User Interface khas dari Samsung yaitu Touchwich UI. Selain desain dan layar lebar, kamu juga akan dimanjakan dengan dua buah kamera beresolusi 8 MP & 5 MP yang sudah dilengkapi dengan LED Flash, Autofocus pada kamera belakang. Bagaimana apakah Samsung Galaxy J3 Prime masuk dalam smartphone incaran anda selanjutnya. Baca android samsung lainnya Untuk kamu yang penasaran dengan Samsung Galaxy J3 Prime, Yuk kita lihat Spesifikasi dan Harga terbarunya dibawah ini. Meski sibuk memasarkan Galaxy S8 dan Galaxy S8+, rupanya Samsung tak melupakan pasar kelas menengah ke bawah. Ya, belum lama ini pabrikan asal Korea Selatan itu telah merilis smartphone terbarunya berjuluk  Ga...
Baca selengkapnya

Adobe Acrobat Pro DC 2015.016.20041 Full

Gambar
Download Adobe Acrobat Pro DC 2015.016.20041 Full Adobe Acrobat Pro DC 2015.016.20041 merupakan sebuah software yang memberi solusi terhadap tantangan-tantangan dari fle PDF yang lengkap. Selain membaca file PDF, Adobe Acrobat Pro DC memiliki banyak kelebihan lain yang tentunya berhubungan dengan file PDF. Adobe Acrobat Pro DC pada versi sebelumnya dikenal dengan Adobe Acrobat XI Pro seperti halnya Adobe Reader yang menjadi Adobe Acrobat Reader DC yang postingan yang telah lalu. Lantas apa bedanya dengan Adobe Reader/Adobe Acrobate Reader DC? Adobe Acrobat Reader DC lebih berfungsi sebagai pembaca file PDF saja, sedangkan Adobe Acrobat Pro DC bisa digunakan untuk edit file PDF, ekspor ke Microsoft PowerPoint, dan mempunyai kemampuan-kemampuan dan fungsi-fungsi baru yang dirancang untuk tablet dan perangkat mobile, seperti kemampuan touch-friendly pada tablet dan ponsel cerdas yang memungkinkan pengguna untuk menambahkan komentar, mengisi, menyimpan dan menandatangani formuli...
Baca selengkapnya