Comment utiliser correctement les familles de polices Font Awesome 5 avec des pseudo-éléments ?

Utilisation des pseudo-éléments Font Awesome 5 avec la famille de polices correcte

Lors de l'ajout d'icônes à une page Web à l'aide de pseudo-éléments CSS avec Font Awesome 5, le la sélection de la famille de polices peut prêter à confusion. Il existe quatre options principales de famille de polices : Font Awesome 5 Free, Font Awesome 5 Solid, Font Awesome 5 Brands et Font Awesome 5 Regular.

Cas 1 : icône de marque (utilisation de la famille de polices "Brands")

Pour les icônes spécifiques à une marque, telles que l'icône Twitter, la famille de polices correcte est "Font Awesome 5". Marques."

Cas 2 : Icône solide (utilisation par erreur de la famille de polices "Solid")

Pour les icônes solides, n'utilisez pas la famille de polices "Font Awesome 5 Solid". Utilisez plutôt « Font Awesome 5 Free ». "Font Awesome 5 Solid" n'affecte que le poids de l'icône, pas sa famille de polices.

Utilisation de plusieurs familles de polices

Pour vous assurer que le navigateur trouve la bonne icône, incluez les quatre familles de polices dans une seule propriété comme celle-ci :

font-family: "Font Awesome 5 Brands","Font Awesome 5 Free","Font Awesome 5 Regular","Font Awesome 5 Solid";

Le navigateur donnera la priorité aux polices dans l'ordre dans lequel elles apparaissent. Si une icône ne s'affiche pas, elle peut ne pas être incluse dans la version gratuite ou nécessiter un abonnement PRO.

Notes supplémentaires

• Les polices « Regular » et « Solid » ne diffèrent que en poids, pas en famille de polices.
• Certaines icônes Regular sont disponibles uniquement dans le package PRO.
• Les icônes Light et Duotone font également partie du package PRO.

En suivant ces directives, les développeurs peuvent garantir que les icônes Font Awesome 5 sont affichées de manière cohérente en utilisant la famille de polices appropriée.

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!