Rumah >hujung hadapan web >tutorial css >Mengapa Ikon Hebat Fon Saya Dipaparkan sebagai Petak Kosong?

Mengapa Ikon Hebat Fon Saya Dipaparkan sebagai Petak Kosong?

Susan Sarandon
Susan Sarandonasal
2024-11-30 09:38:10508semak imbas

Why Are My Font Awesome Icons Showing as Empty Squares?

Menyelesaikan masalah Isu Paparan Ikon Hebat Fon

Menghadapi petak kosong dan bukannya ikon Font Hebat yang diingini boleh mengecewakan. Mari kita terokai isu biasa dan penyelesaiannya.

Masalah sering timbul apabila cuba memasukkan ikon Font Hebat pada halaman web. Kod yang disediakan dengan betul termasuk helaian gaya yang diperlukan, termasuk fail khusus versi untuk Internet Explorer 7. Walau bagaimanapun, pengisytiharan ikon sebenar tiada elemen penting.

Untuk memaparkan ikon Font Awesome dengan betul, dua nama kelas mesti digunakan: kelas fa dan kelas yang menentukan ikon yang dikehendaki. Contohnya, untuk memaparkan ikon Twitter, kodnya hendaklah:

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

Dalam contoh yang diberikan, kelas fa tiada, menyebabkan ruang letak segi empat sama.

Bootstrap 5 Kemas Kini

Dengan keluaran Bootstrap 5, awalan fa telah ditamatkan. Gaya ikon lalai kini ialah "fas" untuk ikon pepejal dan "fab" untuk ikon jenama. Oleh itu, kod hendaklah dikemas kini kepada:

<i class="fas fa-twitter"></i>

Pastikan kedua-dua kelas fa dan kelas khusus ikon disertakan untuk memaparkan ikon Font Awesome dengan betul.

Atas ialah kandungan terperinci Mengapa Ikon Hebat Fon Saya Dipaparkan sebagai Petak Kosong?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn