Cara Mengatasi Themepack Ikon Tidak Muncul
Masalah themepack ikon tidak muncul di Blogger.com biasanya terjadi setelah mengganti template, memasang widget baru, atau mengedit kode tema. Akibatnya, ikon menu, ikon sosial, atau ikon pada tombol navigasi tampil kosong, berubah menjadi kotak, atau tidak muncul sama sekali. Berikut langkah praktis untuk memperbaikinya tanpa mengganggu tampilan blog.
Penyebab Umum Themepack Ikon Tidak Muncul
Penyebab paling sering adalah pustaka ikon (misalnya Font Awesome/Material Icons) tidak termuat, konflik CSS, atau elemen ikon tertimpa oleh pengaturan keamanan konten. Selain itu, penggunaan URL CDN yang diblokir, salah versi ikon, atau atribut async/defer yang tidak tepat pada skrip juga dapat membuat ikon gagal dirender.
Langkah Perbaikan di Blogger
1) Pastikan Library Ikon Terpasang dan Benar
Masuk ke Tema → Edit HTML, lalu cek apakah ada pemanggilan library ikon di dalam <head>. Jika belum ada, tambahkan salah satu yang sesuai dengan tema Anda, misalnya:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> Jika sudah ada namun ikon tetap hilang, coba ganti versi (terutama jika tema memakai kelas lama seperti fa vs fas/fa-solid).
2) Cek Kelas Ikon yang Dipakai Tema
Beberapa tema menggunakan format berbeda. Contoh Font Awesome versi baru:
<i class="fa-solid fa-house"></i>Jika template Anda masih memakai <i class="fa fa-home">, sesuaikan dengan versi library yang dimuat agar kelasnya kompatibel.
3) Atasi Konflik CSS dan Visibility
Buka Inspect pada browser dan cek apakah ikon tersembunyi oleh CSS seperti display:none, opacity:0, atau warna sama dengan latar. Perbaiki dengan menimpa CSS:
.fa, .fas, .fa-solid { display:inline-block; opacity:1; }4) Hindari Mixed Content dan Blokir CDN
Pastikan semua URL memakai https. Jika CDN tertentu diblokir jaringan/ekstensi browser, coba CDN lain atau simpan file CSS ikon secara lokal melalui fitur template (namun tetap ringan agar loading cepat).
Tips Agar Ikon Stabil ke Depannya
Setelah ikon normal, simpan cadangan tema, minimalkan penggunaan lebih dari satu library ikon sekaligus, dan hindari menghapus bagian <head> saat mengedit. Lakukan uji di mode penyamaran untuk memastikan ikon muncul tanpa cache dan tanpa pengaruh ekstensi.
Posting Komentar