Cara Terbaru Mengatasi Font Awesome Tidak Muncul di 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.
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.
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 “fontawesome461” 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=0B8YAJuNSQlSQY3B5STBZS0dxeG8&usp=sharing
Ambil kode unik
yang diberi tanda di atas, lalu ubah menjadi seperti ini.
//googledrive.com/host/0B8YAJuNSQlSQY3B5STBZS0dxeG8
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.6.1 >> 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.6.1 >> css. Buka file yang
bernama font-awesome.min lalu temukan kode di bawah ini.
/*!
* Font Awesome 4.6.1 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.6.1');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.1') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.6.1') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.6.1') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.6.1') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.6.1#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.6.1 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/0B8YAJuNSQlSQY3B5STBZS0dxeG8/fontawesome-webfont.eot?v=4.6.1');src:url('//googledrive.com/host/0B8YAJuNSQlSQY3B5STBZS0dxeG8/fontawesome-webfont.eot?#iefix&v=4.6.1') format('embedded-opentype'),url('//googledrive.com/host/0B8YAJuNSQlSQY3B5STBZS0dxeG8/fontawesome-webfont.woff2?v=4.6.1') format('woff2'),url('//googledrive.com/host/0B8YAJuNSQlSQY3B5STBZS0dxeG8/fontawesome-webfont.woff?v=4.6.1') format('woff'),url('//googledrive.com/host/0B8YAJuNSQlSQY3B5STBZS0dxeG8/fontawesome-webfont.ttf?v=4.6.1') format('truetype'),url('//googledrive.com/host/0B8YAJuNSQlSQY3B5STBZS0dxeG8/fontawesome-webfont.svg?v=4.6.1#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.
Cara pemanggilan Font Awesome ini pun sudah berbeda dari versi yang
jadul. Kurang lebih pemanggilan Font Awesome terbaru seperti di bawah ini.<link rel="stylesheet" href="//googledrive.com/host/0B8YAJuNSQlSQY3B5STBZS0dxeG8"/>5. Cara pemanggilan Font Awesome terbaru
<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.6.1 (12 April 2016)
2. Edit file font-awesome.min.css
Contoh di atas adalah menggunakan Font Awesome paling mutakhir saat ini versi 4.6.1 (12 April 2016)
Namun untuk Anda yang bingung dengan cara diatas, ada cara yang lebih simpel berikut ini :
1. Sama seperti cara diatas yaitu harus Download Font Awesome versi terbaru, Setelah
terdownload, ekstrak berkas rar tersebut.2. Edit file font-awesome.min.css
File ini ada pada folder font-awesome-4.6.1 >> css. Buka file yang bernama font-awesome.min.css lalu temukan kode di bawah ini.
/*!
* Font Awesome 4.6.1 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.6.1');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.1') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.6.1') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.6.1') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.6.1') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.6.1#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}
Ganti kode .. dengan https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1. Jika
dirapikan maka hasilnya akan menjadi seperti di bawah ini.
/*!3. Kemudian jika ingin update ke versi terbaru, Cukup mengganti angka yang diberi warna biru sesuai dengan versi yang terbaru. Kunjungi https://www.bootstrapcdn.com/fontawesome/ untuk mengetahui Font Awesome CSS terbaru
* Font Awesome 4.6.1 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('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.eot?v=4.6.1');src:url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.eot?#iefix&v=4.6.1') format('embedded-opentype'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.woff2?v=4.6.1') format('woff2'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.woff?v=4.6.1') format('woff'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.ttf?v=4.6.1') format('truetype'),url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.svg?v=4.6.1#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}
CATATAN PENTING!!!
·
Cara simpel diatas hanya
untuk Anda yang sudah memasang Font Awesome versi lama ditemplate
blog.
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 blognya; 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...
Tidak menerapkan Font Awesome di template blognya; 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...
