Rumah >hujung hadapan web >tutorial css >Mengapa Ikon 5 Hebat Fon Saya Dipaparkan sebagai Segi Empat, dan Bagaimana Saya Membetulkannya?

Mengapa Ikon 5 Hebat Fon Saya Dipaparkan sebagai Segi Empat, dan Bagaimana Saya Membetulkannya?

Linda Hamilton
Linda Hamiltonasal
2024-12-28 08:58:16626semak imbas

Why is My Font Awesome 5 Icon Displaying as a Square, and How Do I Fix It?

Isu Paparan Ikon Elemen Pseudo dengan Font Awesome 5

Apabila cuba menukar kandungan span dengan ikon Font Awesome terus melalui CSS, anda mungkin menghadapi masalah di mana ikon dipaparkan sebagai segi empat sama. Masalah ini timbul kerana penggunaan versi 'JS SVG' baharu Font Awesome 5.

Untuk menyelesaikan isu ini, anda mesti menambah font-weight: 900 pada CSS anda. Ini akan menukar CSS anda kepada yang berikut:

.myClass {
  font-size:45px;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f008";
  font-weight: 900;
}

Anda juga mungkin perlu mengemas kini URL ke fail CSS Font Awesome untuk memastikan anda menggunakan versi terkini.

Nota: Penyelesaian ini hanya terpakai pada versi 'JS SVG' Font Awesome 5. Jika anda menggunakan versi 'CSS', anda tidak sepatutnya menghadapi masalah ini isu.

Atas ialah kandungan terperinci Mengapa Ikon 5 Hebat Fon Saya Dipaparkan sebagai Segi Empat, dan Bagaimana Saya Membetulkannya?. 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