Mengapa Ikon 5 Hebat Fon Saya Dipaparkan sebagai Segi Empat, dan Bagaimana Saya Membetulkannya?-tutorial css-php.cn

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

Linda Hamilton

Lepaskan： 2024-12-28 08:58:16

asal

617 orang telah melayarinya

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;
}

Salin selepas log masuk

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!