web-dev-qa-db-fra.com

Font Awesome 5 Choisir la bonne famille de polices dans les pseudo-éléments

Je suis actuellement confus en utilisant l'icône dans les pseudo-éléments CSS. Il existe 4 types de famille de polices pour fontawesome: Font Awesome 5 Free, Font Awesome 5 Solid, Font Awesome 5 Brands, Font Awesome 5 Regular

Voici le HTML:

<h1>Hello</h1>

Cas 1

J'utilise cette icône: https://fontawesome.com/icons/twitter?style=brands

Comme vous pouvez le voir, c'est une icône brands, donc font-family: Font Awesome 5 Brands

h1:before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f099"; /* Twitter ICON */
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

ÇA MARCHE!

Cas 2

J'utilise cette icône: https://fontawesome.com/icons/phone?style=solid

Comme vous pouvez le voir, c'est une icône solid, donc font-family: Font Awesome 5 Solid

h1:before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f095"; /* PHONE ICON */
  font-family: "Font Awesome 5 Solid";
  font-weight: 900;
}

NE FONCTIONNE PAS!

Qu'ai-je fait de mal?

Comment savoir quand utiliser la bonne famille de polices?

cssfontsfont-awesomepseudo-elementfont-awesome-5
9
Marcel Angir

Utilisez-les tous dans le même font-family et votre navigateur fera le travail. S'il ne le trouve pas dans le premier, il utilisera le second. ( Plusieurs polices dans la propriété Font-Family? )

Par ailleurs, le bon font-family est Free pas Solid car la différence entre Solide et Régulier est le font-weight et les deux ont le même font-family. Il n'y a pas Solid et Regular dans la famille de polices, seulement Free et Brands.

Vous pouvez également remarquer que presque toutes les versions Solid des icônes sont gratuites MAIS toutes les versions regular ne sont pas gratuites. Certains d'entre eux sont inclus dans le package PRO. Si une icône ne s'affiche pas ce n'est pas nécessairement un font-family problème.

Toutes les versions Light et duotone sont PRO.

.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";
}

.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>

enter image description here

Référence: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define

Question connexe concernant le font-weight problème: Font Awesome 5 sur les pseudo-éléments affiche un carré au lieu d'une icône

11
Temani Afif