Cara Memperbaiki Tampilan Icon Sosial Media yang Error di Blogger atau Website
Pernah saya alami tampilan icon sosial media tidak tampil alias error pada blog saya ini. Bisa jadi hal serupa dialami oleh Anda yang memiliki blog atau website. Saya juga melihat beberapa blog (dari blog rekan saya) tidak menampilkan icon media sosial dengan baik. Ada error pada tampilan icon sosial media bahkan pada menu navigasi.
Tampilan error yang muncul adalah icon sosial media atau menu menjadi kotak-kotak atau huruf "fl" saja. Sedangkan tampilan yang tidak sempurna biasanya masih menampilkan icon sosial media dalam versi lama, belum update icon sosial media terbaru.
Error dan tidak sempurnanya tampilan icon sosial media ini hanya terjadi pada blog atau website yang desain template/themesnya menggunakan icon dari Font Awesome Icons. Disadari atau tidak oleh sang pemilik blog atau website, tampilan icon yang error itu berasal dari icon Font Awesome yang digunakan dalam desain template/themes blog atau websitenya.
Tampilan icon sosial media yang tidak sempurna itu terjadi karena, url link CSS Font Awesome pada blog/websitenya masih menggunakan versi lama ketika template/themes itu dibuat. Padahal saat ini Font Awesome telah memperbarui versi CSS Font Awesome Icon-nya ke versi terbaru yaitu versi 4.6.3.
Selain itu, tampilan icon sosial media yang error dari Font Awesome Icons disebabkan karena tidak dicantumkannya url https:// pada url link CSS Font Awesome Icon tersebut. Maka bagi Anda yang memiliki blog/website yang mengalami error tampilan icon sosial media maupun menu, diharap segera memperbaruinya.
Cara memperbaiki tampilan icon sosial media yang error dari CSS Font Awesome Icon sangat mudah. Cari url link CSS Font Awesome berikut di blog/website Anda, terletak diantara <head> dan </head>:
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>atau jika versinya berbeda (bukan 4.3.0 misalnya 4.5.0), maka cari dengan kata kunci "font-awesome". Lalu temukan link yang serupa dengan link url css tadi. Setelah Anda dapati link url CSS Font Awesome Icon tersebut, ubahlah dengan link url CSS Font Awesome Icon tersebut dengan versi terbaru, yaitu:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>Jangan lupa, sertakan https:// di awal url link CSS Font Awesome Icon versi terbaru tersebut, agar icon tampil baik, tidak muncul berupa kotak-kotak. Jika link url CSS Font Awesome Icons tidak seperti format tersebut, maka cukup ubah url link CSS nya saja, yakni:
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cssPenambahan https:// ini juga mutlak diperlukan dalam url link Google Fonts, bila kita menggunakan salah satu Font Google Fonts pada blog atau website kita agar dapat menampilkan font google tersebut tanpa error.
Font Awesome Icons akan terus senantiasa memperbarui versinya dengan menambahkan beragam icon-icon baru dalam daftar databasenya. Selain menambahkan icon-icon terbaru, Font Awesome Icon juga memperbarui icon logo sosial media mengikuti perubahan logo aslinya. Perubahan yang sangat tampak terkait pembaruan icon-icon sosial media ini contohnya adalah logo Google Plus dan logo Instagram.
Seiring dengan penambahan icon-icon terbaru dari Font Awesome Icon, diharapkan agar Anda senantiasa mengecek versi terbaru Font Awesome Icon, dan memperbaruinya di blog atau website Anda sebagaimana yang telah saya uraikan pada artikel ini. Tujuannya, agar tidak kembali muncul error pada tampilan icon sosial media di blog atau website Anda yang menggunakan Font Awesome Icons. Serta pengunjung blog atau website Anda dapat merasakan kenyamanan dalam berselancar dan bernavigasi. Semoga Bermanfaat.
8 komentar
Write komentarThanks you
Replyini yang saya cari, tampilan template blog saya nggak normal... terima kasih infonya gan...
ReplyFont Awesome anda jg lg bermasalah
ReplyYou're Welcome. Thanks for visit :)
ReplySama-sama. Semoga bermanfaat tipsnya. Ke depan berikutnya, senantiasa update info versi terbaru Fontawesome-nya ya. :-bd
ReplyTerima kasih atas pemberitahuannya. Alhamdulillah setelah saya cek, tidak ada masalah pada fontawesome pada blog saya. :)
ReplyTerima kasih informasinya font awesomenya gan mohon ijin download linknya.
ReplySama-sama... Itu linknya hanya berfungsi untuk embed di blog ataupun website gan... Kalau mau download langsung saja klik link ini http://fontawesome.io/icons/ ;)
ReplyEmoticonEmoticon