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

memperbaiki font awesome yang tidak muncul
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.
memperbaiki font awesome yang tidak muncul

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.
memperbaiki font awesome yang tidak muncul

Lalu akan muncul dialog box lagi. Lanjutkan pengaturan sesuai gambar di bawah ini.
memperbaiki font awesome yang tidak muncul

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.
memperbaiki font awesome yang tidak muncul

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

2 komentar

  1. Profil:https://www.blogger.com/profile/07929995810687891577
    Makasih banyak om. Tutornya komplit banget
    Lam kenal juga ya :)
    • Profil:https://www.blogger.com/profile/13162875744493565460
      sama sama om, makasih juga udah berkenan membaca artikel ini
      salam kenal :D
  • Gunakan fitur Format Kode untuk menulis atau menyisipkan kode dan gambar dengan format tertentu.
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi via Email ketika ada balasan.
  • Apabila ada pertanyaan di luar artikel silahkan telusuri atau bertanya lewat .
  • Untuk menyisipkan gambar, silahkan upload gambar terlebih dahulu. Lalu salin URL Gambar tersebut, paste ke kolom di bawah ini, lalu klik tombol Image.
  • Untuk menyisipkan Potongan Kode, atau Quote, paste kode tersebut ke kolom di bawah ini, lalu klik tombol pre, code, atau quote.
  • Untuk menulis kode dalam Syntax Highlighter gunakan format kode panjang.
  • Setelah itu, salin atau copy hasil parse dengan klik tombol icon Salin Kode! lalu paste ke kolom komentar.

image quote pre code