Mengapa Fon Saya Hebat 5 Ikon Ditunjukkan sebagai Petak Kosong, dan Bagaimana Saya Boleh Membetulkannya?

Petak Kosong dalam Font Awesome 5 Versi SVG JS: Punca Punca Didedahkan

Percubaan untuk memasukkan ikon Font Awesome ke dalam item senarai melalui JS SVG versi telah menghasilkan petak kosong untuk sesetengah pengguna. Isu ini berpunca daripada pergantungan perpustakaan pada elemen pseudo.

Menyelesaikan Isu dengan Elemen Pseudo

Dengan keluaran terbaharu Font Awesome 5, anda boleh mendayakan pseudo -penggunaan elemen dengan memasukkan atribut "data-search-pseudo-elements". Ini mengarahkan pustaka untuk mencari elemen pseudo dalam CSS.

Coretan Kod Disemak

Untuk melaksanakan penyelesaian ini, ubah suai kod anda seperti berikut:

ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  display: none;
}

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

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

<ul>
  <li class="testitems">List Item 1</li>
  <li class="testitems">List Item 2</li>
  <li class="testitems">List Item 3</li>
  <li class="testitems">List Item 4</li>
  <li class="testitems">List Item 5</li>
</ul>

Kod yang disemak ini menyembunyikan elemen pseudo dan menyasarkan SVG untuk penggayaan, membolehkan paparan ikon yang betul.

Atas ialah kandungan terperinci Mengapa Fon Saya Hebat 5 Ikon Ditunjukkan sebagai Petak Kosong, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!