Font Awesome yang tidak muncul

Saya adalah blogger cupu, tapi keinginan untuk blog saya agar terlihat menarik sangat begitu tinggi untuk merias tampilan blog saya. termasuk oleh keberadaan font awesome yang cukup populer akhir-akhir ini.
Sayang.. karena keterbatasan pengetahuan soal web.. beberapa hari yang lalu saya sempat bingung setelah mencoba menghiasi panel navigasi paling atas di blog ini dengan tampilan-tampilan dari font awesome yang ternyata hanya muncul kotak polos saja tanpa muncul gambar icon sesuai harapan.

Seperti dibawah ini contoh pengalaman saya pada saat itu yang saya tulis seperti ini <i class="fa-lock"></i>
Gambar ikon terlihat hanya muncul kotak blank saja, bahkan bisa jadi blank tidak muncul sama sekali.
saya sempat bingung,karena pengetahuan dalam hal seperti ini masih minim sekali, sempat mengira ada kesalahan pada CSS dan kode pada HTML-nya. tetapi saya sempat ingat dengan template kepunyaan mbak arlina, setelah saya cermati kode penulisan-nya, ternyata saya baru ngeh, jika script yang saya tulis diatas tidak menyertakan "fa" sebelum "fa-lock", dan setelah saya tambahkan "fa" hingga jadi seperti ini "fa-lock" dan saya simpan untuk melihat hasil-nya, barulah icon font awesome bisa muncul sesuai harapan seperti gambar ikon dibawah ini.

font awesome fixDari situ bisa disimpulkan bahwa jika kita ingin menyertakan font awesome pada blog atau pada post artikel, penambahan kata "fa" harus dituliskan sebelum code icon-nya.
Semisal jika kita ingin menampilkan ikon download menggunakan font awesome yang mana kode-nya "fa-download", maka penulisannya harus menjadi "fa fa-download". dan hasilnya jika saya tuliskan dalam format yang benar, maka akan tampil seperti gambar dibawah ini :

Saya rasa ini cukup mudah di fahami bagi para blogger pemula seperti saya jika ingin mempercantik tampilan blog-nya dengan beberapa icon dari font awesome.
Dan untuk bisa melihat rujukan tentang kode-kode font awesome, anda juga bisa akses url dibawah ini.


Dan syarat agar bisa menggunakan font awesome, copast baris script url dibawah ini pada baris template HTML, dan letakkan setelah tag <head>.
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Sekian saja artikel untuk mengatasi Font Awesome yang tidak muncul dihari jum'at yang panas ini, semoga bisa membantu teman-teman yang baru saja terjun di dunia blogging. 

0 comments