Pourquoi les puces des éléments de la liste SVG Font Awesome 5 s'affichent-elles sous forme de carrés vides ?

Font Awesome 5 affiche un carré vide lors de l'utilisation de la version JS SVG

Lorsque vous essayez d'utiliser Font Awesome 5 avec la version JS SVG, les utilisateurs peut rencontrer un problème où les puces des éléments de liste sont affichées sous forme de carrés vides. Ce problème vient du fait que Font Awesome 5 désactive par défaut la prise en charge des pseudo-éléments.

Solution

Pour activer la prise en charge des pseudo-éléments pour la version JS de Font Awesome 5, ajoutez l'attribut data-search-pseudo-elements à la balise script :

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

De plus, c'est crucial pour styliser les éléments SVG dans les pseudo-éléments :

.testitems:before {
  content: "\f058";
  display: none;
}

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

En suivant ces étapes, les utilisateurs peuvent intégrer de manière transparente Font Awesome 5 avec des pseudo-éléments dans leurs applications JavaScript.

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!