100+ Font Awesome atau Ikon Unik dan Menarik untuk Blog

KINI banyak template blogger seo yang memiliki tampilan yang unik dan menarik, putih dan bersih, fast loading dan telah mendukung fitur seo friendly atau user friendly bagi para pengunjung atau visitor blog.

100+ Font Awesome atau Ikon Unik dan Menarik untuk Blog

Nah, kali ini ada yang cukup unik, yakni ikon menarik yang seringkali dipasangkan dibagian navigasi menu blog. Ada ikon gerigi, statistik, fa-home atau rumah (home), fa-battery atau ikon baterai dan masih banyak lagi.

Anda bisa melihat dibagian footer tampilan blog seo killer ini, yakni terdapat bulatan hitam yang menghubungkan All Right Reserved dengan Powered by Blogger. Lihat gambar dibawah ini:

100+ Font Awesome atau Ikon Unik dan Menarik untuk Blog
Gambar 1

Nah, itulah yang dimaksud dengan ikon (icon) unik yang dimaksud. Anda juga bisa menempatkannya di bagian navigasi menu seperti yang ditampilkan di blog ini, lihat gambar dibawah ini:

100+ Font Awesome atau Ikon Unik dan Menarik untuk Blog
Gambar 2

Nah, keren kan? Sekarang mari kita bahas cara mendapatkannya lalu memasangkannya di dalam template blogger.

100+ Font Awesome atau Ikon Unik dan Menarik untuk Blog


Untuk bagaimana cara mendapatkan, mengubah dan memasangkan font awesome dan ikon (icon) unik dan menarik di blog pada bagian navigasi menu blog ini cukup mudah, silahkan akses ke halaman Font Awesome Cheatsheet: Icon, CSS Class & Unicode ini.

Di halaman website tersebut, tersedia banyak kumpulan ikon unik. Pilih salah satu icon font awesome, misalnya fa-home []. Pilih salah satu antara "fa-home" atau kode  ini. Silahkan di COPY dan PASTE salah satu kode ke dalam template blogger.

Sebagai contoh yang saya maksudkan diatas tadi, yakni bulatan hitam atau bullet hitam, saya menggunakan font awesome dengan kode ● ini. Untuk memasangkannya, silahkan terapkan seperti dibawah ini:

<div>All Right Reserved &#9679; Powered by <a href='http://www.blogger.com' target='_blank'>Blogger</a>

Namun, jika Anda ingin memasangkan ikon font awesome tersebut dibagian navigasi menu seperti pada gambar kedua diatas, ikuti langkah seperti dibawah ini:

<li><a class='prett' href='#'>Pendidikan <i class='fa fa-arrow-down'/></a>
<ul class='menus'>
<li><a href='/search/label/Label1' title='Deskripsi Singkat'>Label 1</a></li>
<li><a href='/search/label/Label2' title='Deskripsi Singkat'>Label 2</a></li>
<li><a href='/search/label/Label3' title='Deskripsi Singkat'>Label 3</a></li>
</ul>
</li>

Saya sendiri menggunakan font awesome "fa fa-arrow-down" yang menampilkan ikon drop down seperti yang tampak pada gambar kedua diatas tadi. Bisa saja Anda menggantinya kode &#xf063; ini, tampilannya sama persis kok.

Gimana? Cara membuatnya mudah, kan? Good luck & happy blogging :D

2 Responses to "100+ Font Awesome atau Ikon Unik dan Menarik untuk Blog"

Berkomentarlah dengan baik dan benar, komentar spam tidak akan dipublikasikan. Harap baca semua atau keseluruhan artikel. Gunakan anonymous jika tidak punya akun google untuk berkomentar. Centang OK pada NOTIFY ME agar komentar balasan masuk ke email Anda.