Font Awesome 5 Empty Square Issue: Bagaimana untuk Membetulkan Masalah Rendering Ikon JS SVG?

Fon Awesome 5: Menyelesaikan Masalah Empty Square Isu dengan JS SVG

Apabila cuba menggunakan versi JS SVG Font Awesome 5 untuk menggantikan titik peluru dengan ikon, pengguna mungkin menghadapi isu pemaparan segi empat sama kosong. Artikel ini menyelidiki punca dan menyediakan penyelesaian.

Memahami Punca

Isu segi empat sama kosong timbul kerana, secara lalai, versi JS Font Awesome 5 tidak mendayakan penggunaan elemen pseudo (:sebelum dan :selepas).

Melaksanakan Penyelesaian

Untuk menyelesaikan isu ini, anda boleh memanfaatkan atribut data-search-pseudo-elements:

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

Atribut ini mengarahkan Font Awesome untuk menghuraikan elemen pseudo dalam HTML. Walau bagaimanapun, untuk memaparkan ikon dengan betul, anda mungkin perlu menyembunyikan elemen pseudo dan menggayakan elemen SVG secara langsung, seperti berikut:

.testitems:before {
  display: none; /* Hide the pseudo element */
}

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

Dengan melaksanakan perubahan ini, anda sepatutnya dapat menghasilkan 5 ikon Font Hebat menggunakan versi JS SVGnya dengan betul.

Atas ialah kandungan terperinci Font Awesome 5 Empty Square Issue: Bagaimana untuk Membetulkan Masalah Rendering Ikon JS SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!