Mengapa Fon Hebat 5 Peluru Item Senarai SVG Ditunjukkan sebagai Petak Kosong?

Fon Awesome 5 Menunjukkan Empty Square apabila Menggunakan Versi JS SVG

Apabila cuba menggunakan Font Awesome 5 dengan versi JS SVG, pengguna mungkin menghadapi isu di mana titik tumpu item senarai dipaparkan sebagai petak kosong. Masalah ini timbul daripada fakta bahawa Font Awesome 5 melumpuhkan sokongan elemen pseudo secara lalai.

Penyelesaian

Untuk mendayakan sokongan elemen pseudo untuk versi JS Font Awesome 5, tambahkan atribut data-search-pseudo-elements pada skrip tag:

<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>

Selain itu, adalah penting untuk menggayakan elemen SVG dalam elemen pseudo:

.testitems:before {
  content: "\f058";
  display: none;
}

.testitems svg {
  color: blue;
  margin: 0 5px 0 -15px;
}

Dengan mengikuti langkah ini, pengguna boleh menyepadukan Font Awesome 5 dengan lancar dengan pseudo- elemen dalam aplikasi JavaScript mereka.

Atas ialah kandungan terperinci Mengapa Fon Hebat 5 Peluru Item Senarai SVG Ditunjukkan sebagai Petak Kosong?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!