Mengapa Fon Saya Hebatkan 5 Ikon Dipaparkan sebagai Petak pada Pseudo-elements?

Rendering Ikon Fon Hebat 5 sebagai Petak pada Elemen Pseudo

Dalam senario tertentu, pengguna yang cuba mengubah kandungan elemen span secara dinamik dengan ikon Font Hebat melalui CSS mungkin menghadapi isu di mana ikon dipaparkan sebagai segi empat sama bukannya yang dimaksudkan ikon.

Mengenal pasti Masalah

Kod CSS yang disediakan menunjukkan isu:

.myClass {
  font-size:25px;
}

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

Walau bagaimanapun, CSS ini memaparkan ikon sebagai segi empat sama dan bukannya ikon yang ditentukan ( 'f008').

Memahami Penyelesaian

Untuk menyelesaikan isu ini, kod CSS mesti sertakan sifat berikut:

font-weight: 900

Kod CSS terakhir adalah seperti berikut:

.myClass {
  font-size:45px;
}

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

Dengan menyatakan berat fon sebagai 900, ikon akan dipaparkan dengan betul pada elemen pseudo.

Atas ialah kandungan terperinci Mengapa Fon Saya Hebatkan 5 Ikon Dipaparkan sebagai Petak pada Pseudo-elements?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!