Comment définir correctement les familles de polices pour les icônes Font Awesome en CSS ?

Détermination de la famille de polices correcte dans les pseudo-éléments Font Awesome

Font Awesome 5 offre aux utilisateurs une gamme de familles d'icônes, notamment Free, Solide, marques et régulier. Chaque famille nécessite une affectation de famille de polices spécifique dans les pseudo-éléments CSS pour afficher correctement les icônes.

Cas 1 : Icône de marque

Lors de l'utilisation d'une icône de marque, telle que l'icône Twitter disponible sur https://fontawesome.com/icons/twitter?style=brands, la famille de polices correcte est "Font Awesome 5 Brands". En effet, les icônes de marque ont un style visuel distinct et sont hébergées dans une famille de polices distincte.

Cas 2 : Icône solide

Lorsque vous essayez d'afficher une icône solide, comme l'icône de téléphone disponible sur https://fontawesome.com/icons/phone?style=solid, il est crucial de noter que la famille de polices correcte n'est pas « Font Awesome 5 Solid ». Les icônes solides appartiennent en fait à la même famille de polices que les icônes ordinaires, à savoir "Font Awesome 5 Free".

L'approche correcte

Au lieu d'attribuer une police spécifique- familles de polices pour chaque style d'icône, il est recommandé d'inclure toutes les familles de polices nécessaires sur une seule ligne, séparées par des virgules. Cela garantit que le navigateur utilisera la police appropriée en fonction du style de l'icône :

.icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free";
}

Avec cette approche, le navigateur donnera la priorité à la famille de polices Brand lorsqu'il rencontrera des icônes de marque et à la famille de polices Free lorsqu'il rencontrera icônes solides ou régulières.

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!