Comment définir correctement la famille de polices pour les icônes Font Awesome 5 dans les pseudo-éléments CSS ?

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

Lors de l'utilisation des icônes Font Awesome dans les pseudo-éléments CSS, il est Il est crucial de choisir la bonne famille de polices pour garantir que les icônes s'affichent correctement. Comme vous l'avez constaté, l'utilisation d'une famille de polices incorrecte peut entraîner la non-apparition de l'icône.

Plusieurs polices dans la propriété Font-Family

La solution réside dans l'utilisation plusieurs polices dans la propriété font-family. Ce faisant, le navigateur recherchera l'icône dans chaque famille de polices spécifiée jusqu'à ce qu'il trouve une correspondance. Dans ce cas, vous pouvez utiliser :

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

Font-Family pour les icônes solides et régulières

Contrairement à ce que vous avez supposé, la famille de polices pour les deux les icônes solides et régulières sont « Font Awesome 5 Free » et non « Font Awesome 5 Solid ». La différence entre les icônes solides et régulières réside dans leur poids de police, et non dans leur famille de polices.

Icônes gratuites ou PRO

Vous avez également remarqué que toutes les icônes régulières les icônes sont gratuites. Certains sont inclus dans le package PRO de Font Awesome. Par conséquent, si une icône ne s'affiche pas, vérifiez sa disponibilité avec le forfait gratuit.

Exemple de code

Pour illustrer l'utilisation correcte, considérons l'exemple suivant :

.icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.icon1:before {
  content: "\f099"; /* TWITTER ICON */
  font-weight: 400;
}

.icon2:before {
  content: "\f095"; /* PHONE ICON */
  font-weight: 900;
}

.icon3:before {
  content: "\f095"; /* PHONE ICON */
  font-weight: 400;/*This one will not work because the regular version of the phone icon is in the Pro Package*/
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css">

<div class="icon1 icon"></div>
<div class="icon2 icon"></div>
<br>

<div class="icon3 icon"></div>

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!