Mengapa Font Awesome 5 Menunjukkan Petak Kosong Apabila Menggunakan JS dan SVG untuk Mata Bullet?

Fon Awesome 5 Menunjukkan Empty Square dengan JS SVG

Apabila cuba menggunakan Font Awesome 5 untuk menggantikan titik tumpu standard dalam senarai tidak tersusun, anda mungkin menemui petak kosong dan bukannya ikon yang dikehendaki. Isu ini boleh berlaku apabila menggunakan versi JavaScript dan SVG pustaka.

Penyelesaian

Untuk menyelesaikan isu ini, pastikan anda menggunakan versi terkini Font Awesome 5 (v5.13.0 atau lebih baru). Keluaran ini memperkenalkan keupayaan untuk menggunakan elemen pseudo dengan versi JS.

Untuk mendayakan penggunaan elemen pseudo, tambahkan atribut unsur-unsur carian data pada tag:

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

CSS Diubahsuai

Untuk memaparkan ikon Font Awesome, anda perlu menyembunyikan unsur pseudo lalai dan menyasarkan elemen SVG untuk penggayaan:

ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  display: none; /* Hide the pseudo element */
}

/* Target the SVG for styling */
.testitems svg {
  color: #004d00;
  margin: 0 5px 0 -15px;
}

Diubah suai HTML

Kod HTML anda kekal sama, kerana CSS yang diubah suai kini akan menyasarkan elemen SVG dengan betul:

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

Contoh Penggunaan

Untuk menunjukkan penyelesaian yang berfungsi, anda boleh menggantikan dengan yang berikut kod:

<li class="testitems"><i class="fa fa-user"></i>List Item 1</li>

Ini akan memaparkan ikon pengguna berwarna biru sebagai titik tumpu untuk item senarai pertama.

Atas ialah kandungan terperinci Mengapa Font Awesome 5 Menunjukkan Petak Kosong Apabila Menggunakan JS dan SVG untuk Mata Bullet?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!