Maison >interface Web >tutoriel CSS >Comment choisir la famille de polices appropriée pour les pseudo-éléments Font Awesome 5 ?

Comment choisir la famille de polices appropriée pour les pseudo-éléments Font Awesome 5 ?

Susan Sarandon
Susan Sarandonoriginal
2024-12-13 11:03:12446parcourir

How to Choose the Correct Font-Family for Font Awesome 5 Pseudo-Elements?

Choisir la famille de polices correcte pour les pseudo-éléments Font Awesome 5

Lors de l'utilisation des icônes Font Awesome 5 comme pseudo-éléments en CSS, il est crucial de spécifier la famille de polices appropriée. Les options disponibles sont : Font Awesome 5 Free, Font Awesome 5 Solid, Font Awesome 5 Brands et Font Awesome 5 Regular.

Cas 1 : Icône de marque

Si l'icône que vous utilisez appartient au style Brands (par exemple, Twitter), utilisez "Font Awesome 5 Brands" font-family.

h1:before {
  font-family: "Font Awesome 5 Brands";
}

Cas 2 : Icône solide (résolution du problème)

Pour les icônes solides, ne utilisez le " Famille de polices "Font Awesome 5 Solid". Utilisez plutôt « Font Awesome 5 Free », car les icônes Solid et Regular partagent la même famille de polices.

h1:before {
  font-family: "Font Awesome 5 Free";
}

Règle générale : utilisation de plusieurs familles de polices

Pour garantir la compatibilité, intégrez toutes les familles de polices nécessaires dans la propriété font-family. Le navigateur sélectionnera automatiquement le bon.

h1:before {
  font-family: "Font Awesome 5 Brands","Font Awesome 5 Free";
}

Remarque :

  • Les icônes solides et régulières ne diffèrent que par le poids de la police, pas par la famille de polices. .
  • Toutes les icônes Regular ne sont pas gratuites ; certaines sont disponibles uniquement dans le package Pro.
  • Les icônes qui ne s'affichent pas ne sont pas nécessairement dues à un problème de famille de polices.
  • Toutes les versions Light et Duotone des icônes sont incluses dans le package Pro. .

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!

Déclaration:
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