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

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

DDD
Libérer: 2024-12-16 03:31:09
original
748 Les gens l'ont consulté

Why Are Font Awesome 5 SVG List Item Bullets Showing as Empty Squares?

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>
Copier après la connexion

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;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal