Mengapa Fon Saya Tidak Hebat 5 Ikon Ditunjukkan dalam Elemen Pseudo?

Menyelesaikan Masalah Font Awesome 5 Isu Paparan pada Elemen Pseudo

Apabila cuba menukar kandungan ikon span menggunakan Font Awesome 5 melalui CSS, adalah mungkin untuk menghadapi keadaan di mana ruang letak segi empat sama dipaparkan dan bukannya ikon yang dimaksudkan. Isu ini boleh berlaku walaupun pemasukan betul bagi CDN dan penanda HTML Font Awesome.

Pelaksanaan CSS Salah

Kod CSS yang disediakan menggunakan gaya berikut:

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

Walau bagaimanapun, kod ini gagal memaparkan ikon dengan betul. Untuk menangani perkara ini, adalah penting untuk menambahkan sifat font-weight: 900; pada gaya unsur pseudo.

CSS yang diperbetulkan

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

Dengan menambahkan sifat ini, anda memberikan berat yang diperlukan pada ikon, menyebabkan ia dipaparkan dengan betul. Kod dikemas kini berikut harus menyelesaikan isu:

.myClass {
  font-size: 45px;
}

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

Atas ialah kandungan terperinci Mengapa Fon Saya Tidak Hebat 5 Ikon Ditunjukkan dalam Elemen Pseudo?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!