Solusi Terbaru Font Awesome Tidak Muncul di Template Blogger

Dewasa ini penggunaan Font Awesome makin marak diterapkan oleh para blogger di templatenya. Meskipun penerapan Font Awesome ini terbilang gampang, namun kenyataanya banyak juga yang masih mengalami kesulitan dalam menerapkannya. Terkadang tanpa penampakan sama sekali, kadang tampil kotak-kotak saja (jika web dibuka menggunakan chrome dan opera), kadang pula tampil dengan bentuk macam huruf china (jika web dibuka menggunakan firefox).

Masalah pada Font Awesome

Nah, berikut ini akibat Font Awesome berjalan tidak normal sebagaimana mestinya di template blogger.

Penyebab Font Awesome tidak muncul menurut pandangan saya.

• Font Awesome yang digunakan adalah versi lama.
• Cara pemanggilan Font Awesome yang digunakan cara model jadul.
• Penerapan Font Awesome terbaru belum tepat.

Kesalahan ini memang tidak sepenuhnya dari anda. Namun yang patut diperhatikan lagi bahwa pihak pengelola Font Awesome terus mengembangkan fiturnya baik dari penambahan kode Font Awesomenya dan cara pemanggilannya. Guna membuktikan kebenaran dari 3 sebab yang saya sebutkan di atas coba periksa kembali Font Awesome pada template blogger anda.

Perhatikan versi Font Awesome blog anda menggunakan versi berapa? Dan cara pemanggilannya pula seperti apa? Lalu fitur keseluruhan kodingnya sudah lengkap atau tidak? Jika masih menggunakan Font Awesome versi lama dan format pemanggilan model jadul, juga penerapan keseluruhan fitur Font Awesome terbaru belum tepat, silahkan di upgrade dengan cara seperti di bawah ini.

1. Download Font Awesome terbaru

Masuk ke link http://fortawesome.github.io/Font-Awesome/ lalu klik “Download”. Setelah terdownload, ekstrak berkas rar tersebut.

2. Membuat folder di Google Drive

Untuk membuat folder di Google Drive klik https://drive.google.com. setelah link terbuka klik Buat >> Folder. Beri nama folder tersebut dengan “fontawesome43” atau sesuka anda.

Setelah folder terbuat, share folder tersebut agar bisa dibuka orang lain, juga bisa jalan sempurna di blog. Dengan cara klik kanan pada folder tersebut klik Bagikan... >> Bagikan... maka akan muncul dialog box seperti gambar di bawah ini. Ubah sesuai gambar.

Lalu akan muncul dialog box lagi. Lanjutkan pengaturan sesuai gambar di bawah ini.

Jangan lupa untuk mengabil url folder tersebut yang seperti ini.

https://drive.google.com/folderview?id=0B-ZIkf9kZ-oMZE5IQXBHdG53eE0&usp=sharing

Ambil kode unik yang diberi tanda di atas, lalu ubah menjadi seperti ini.

//googledrive.com/host/0B-ZIkf9kZ-oMZE5IQXBHdG53eE0

3. Mengupload file ke folder di Google Drive

Klik folder yang telah dibuat pada Google Drive tadi, lalu arahkan kursor anda ke icon tombol unggah >> File. Masuk ke direktori Font Awesome yang telah di ekstak pada komputer anda tadi, dengan cara klik folder font-awesome-4.3.0 >> fonts. Seleksi semua file yang ada di dalamnya, kemudian klik Open.

4. Edit file font-awesome.min

File ini ada pada folder font-awesome-4.3.0 >> css. Buka file yang bernama font-awesome.min lalu temukan kode di bawah ini.

/*!
 *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.3.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}

Ganti kode ../fonts dengan link url folder yang telah di ubah sebelumnya. Jika dirapikan maka hasilnya akan menjadi seperti di bawah ini.

/*!
 *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
@font-face{font-family:'FontAwesome';
 src:url('//googledrive.com/host/0B-ZIkf9kZ-oMZE5IQXBHdG53eE0/fontawesome-webfont.eot?v=4.3.0');
 src:url('//googledrive.com/host/0B-ZIkf9kZ-oMZE5IQXBHdG53eE0/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),url('//googledrive.com/host/0B-ZIkf9kZ-oMZE5IQXBHdG53eE0/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),url('//googledrive.com/host/0B-ZIkf9kZ-oMZE5IQXBHdG53eE0/fontawesome-webfont.woff?v=4.3.0') format('woff'),url('//googledrive.com/host/0B-ZIkf9kZ-oMZE5IQXBHdG53eE0/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),url('//googledrive.com/host/0B-ZIkf9kZ-oMZE5IQXBHdG53eE0/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
 font-weight:normal;
 font-style:normal;
}

Simpan file CSS font-awesome.min di atas lalu upload ke Google Drive. Jangan lupa untuk share file, mengambil url hostingnya, dan merubahnya, seperti pada langkah sebelumnya. Lalu hasilnya akan seperti ini.

<link rel="stylesheet" href="//googledrive.com/host/0B-ZIkf9kZ-oMOW8wQngtYk14RWc"/>

5. Cara pemanggilan Font Awesome terbaru

Cara pemanggilan Font Awesome ini pun sudah berbeda dari versi yang jadul. Kurang lebih pemanggilan Font Awesome terbaru seperti di bawah ini.

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

Atau

<i class='icon fa fa-picture-o icon-large'/>

Jika cara di atas berhasil, maka secara otomatis pandangan di bawah ini telah gugur.
Contoh di atas adalah menggunakan Font Awesome paling mutakhir saat ini versi 4.3.0 (5 Maret 2015)

Penyebab Font Awesome tidak muncul menurut pandangan lain.

Koneksi internet; Pandangan ini ada benarnya dan ada kelirunya. Ada yang berpendapat bahwa jika koneksi sedang lelet dan menggemaskan maka Font Awesome tidak akan tampil sempurna, sebaliknya jika koneksi sedang kencang-kencangnya maka Font Awesome akan muncul sempurnya. Namun, sesuai penelusuran saya, ada blog yang Font Awesomenya tidak muncul sempurna (tidak stabil) baik itu pada koneksi yang sedang kencang-kencangnya dan koneksi yang leletnya bukan main, baik dari browser, pc (laptop), dan OS yang berbeda-beda.

Tidak menerapkan Font Awesome di template bloggnya; Nah ini jangan ditanyakan lagi, mau di bolak-balik bagaimanapun itu template Font Awesomenya gak bakal nongol.
Semoga artikel kali ini bisa membantu bagi teman-teman yang menerapkan Font Awesome di template blognya. Entah Font Awesoenya itu yang sebelumnya muncul tiba-tiba sudah tidak muncul lagi atau yang baru ingin menerapkannya. Salam blogging...

Baca Juga: