Font Awesome 5 Empty Square Issue : Comment résoudre les problèmes de rendu des icônes JS SVG ?

Font Awesome 5 : Dépannage du problème des carrés vides avec JS SVG

Lorsque vous essayez d'utiliser la version JS SVG de Font Awesome 5 pour remplacer les puces par des icônes, les utilisateurs peuvent rencontrer un problème de rendu de carré vide. Cet article approfondit la cause et propose une solution.

Comprendre la cause

Le problème des carrés vides se pose car, par défaut, la version JS de Font Awesome 5 ne permet pas l'utilisation de pseudo-éléments (:before et :after).

Mise en œuvre de la solution

Pour résoudre ce problème, vous pouvez tirer parti de Attribut data-search-pseudo-elements :

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

Cet attribut demande à Font Awesome d'analyser les pseudo-éléments en HTML. Cependant, pour afficher correctement les icônes, vous devrez peut-être masquer le pseudo-élément et styliser directement l'élément SVG, comme suit :

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

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

En implémentant ces modifications, vous devriez pouvoir restituer les icônes Font Awesome 5. correctement en utilisant sa version JS SVG.

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!