Cara Menyisipkan Icon Font Awesome di Blogger

Dulu, nulis diblog itu seperti "hal tersulit" dilakukan, karena belum adanya fitur-fitur yang ada sekarang ini, misalnya smiley atau emoticon.

Dulu saya sempat frustasi (ahh,, lebayy) karena hanya ingin menampilkan emoticon di blog. Meskipun banyak yang membagikan script emoticon di internet, tapi rasanya gak puas. Saya juga pernah membuat script emoticon sendiri (emotnya doang, scriptnya dari orang lain. 😄) untuk Blogger, plain emot dan gif emot, tapi sekarang udah gak kepake lagi walaupun masih bisa digunakan.

Dengan hadirnya 'Blog on The Go' alias bisa ngblog di mobile phone, menyisipkan emoticon pun lebih gampang, karena keyboard di smartphone sudah punya fitur emoticon. Seperti emot di artikel ini yang saya tulis via smartphone, 😀😁😂😃😄😅😆😉😊😋😎😍😘😗😙😚😇😐😑.

Tapi................

Rasanya masih kurang puas kalau cuma emot biasa. Bagaimana kalau menyisipkan emot thumbnail icon seperti icon Facebook, Twitter, dll. Contohnya seperti ini: 

Keren kan?

Caranya mudah banget. Cara ini saya dapatkan dari Template-template yang dibagikan di internet, karena font jenis ini lagi ngetren dikalangan Template Maker. Namanya Font Awesome. Jangan harap kamu bisa download, karena adalah Webfont alias berbasis kode (bukan file).

Begini caranya:

Perhatian!
Webfont ini bekerja menggunakan kode HTML. Pastikan kamu mengetiknya di HTML Editor.

Contoh untuk Facebook: 
Kodenya:

<i class="fa fa-facebook></i>

Kamu cukup ganti tulisan facebook dengan icon yang kamu suka, misalnya twitter, instagram, youtube, dll.

• Untuk icon lainnya yang lebih lengkap, kunjungi Fontawesome atau klik disini!

Font Awesome

• Ketikkan nama icon, misal "home" (tanpa tanda kutip), lalu klik icon yang disukai tertampil dari hasil pencarian

• Copy kodenya dan Paste dihalaman yang kamu inginkan.

Kalau kamu ingin menyisipkan link/URL, cukup gunakan kode berikut (ganti huruf yang berwarna merah dengan yang kamu mau):

<a href="http://yourlink.com">font-code</a>

Contoh:

<a href="http://facebook.com/asepmulyana.ht"><i class="fa fa-facebook"></i></a>

Mudah, kan?

Selamat mencoba!

__________

featured image source: fontawesome.io

other images: screenshot