Pourquoi mes icônes Font Awesome 5 s'affichent-elles sous forme de carrés au lieu d'icônes ?

Problème de pseudo-éléments Font Awesome 5 : carrés contre icônes

En CSS, l'utilisation de pseudo-éléments pour afficher les icônes Font Awesome 5 peut parfois entraînent des carrés inattendus au lieu d'icônes dans cet article Nous explorerons les causes du problème et comment les résoudre.

Causes des carrés

Le problème des carrés qui en résulte est causé par un manque de poids de caractère approprié. Par défaut, les pseudo-éléments ont une épaisseur de police « normale », ce qui ne convient pas aux icônes Font Awesome qui nécessitent une épaisseur « gras » ou « 900 » pour s'afficher correctement.

Solution de contournement

Pour résoudre ce problème Ajoutez la règle suivante à votre CSS :

.myClass::after {
  font-weight: 900;
}

Cette règle définira le poids de la police du pseudo-élément sur "900", ce qui entraînera l'affichage correct de l'icône Font Awesome

Exceptions

Veuillez noter que ce correctif s'applique uniquement aux icônes Font Awesome. Les icônes d'autres jeux d'icônes peuvent nécessiter des épaisseurs de police différentes.

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!