Pourquoi mes icônes Font Awesome 5 s'affichent-elles sous forme de carrés vides et comment puis-je y remédier ?

Carrés vides dans la version Font Awesome 5 JS SVG : cause profonde révélée

Tentatives d'incorporation d'icônes Font Awesome dans les éléments de liste via le JS SVG version ont donné lieu à des carrés vides pour certains utilisateurs. Ce problème provient de la dépendance de la bibliothèque à l'égard des pseudo-éléments.

Résoudre le problème avec les pseudo-éléments

Avec la dernière version de Font Awesome 5, vous pouvez activer le pseudo-élément. -utilisation de l'élément en incorporant l'attribut "data-search-pseudo-elements". Cela demande à la bibliothèque de rechercher des pseudo-éléments dans le CSS.

Extrait de code révisé

Pour implémenter cette solution, modifiez votre code comme suit :

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>

Ce code révisé masque le pseudo-élément et cible le SVG pour le style, permettant ainsi l'affichage correct de icônes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!