web-dev-qa-db-fra.com

Le pseudo-élément "before" ne fonctionne pas dans Font awesome v.5

Qu'est-ce que je fais mal?

<ul>
<li class="facebook"> Facebook</li>
<li><i class="fab fa-Twitter-square"></i> Twitter</li>
</ul>

li.facebook:before {
    content: "\f09a";
    font-family: FontAwesome;
}
li {
  list-style:none;
}

JSFiddle: https://jsfiddle.net/labanino/nwodoo32/

cssfont-awesome-5
4
Labanino

UPDATE 2: TL; DR

Le font-family est faux.

utiliser font-family: "Font Awesome 5 Brands"

Pour Font Awesome 5 cela doit être l’un des suivants:

Mis à jour car vous utilisez des webfonts css:

Pour les méthodes Web Fonts avec CSS

Libre

font-family: "Font Awesome 5 Free"

Pro

font-family: "Font Awesome 5 Pro"

Marques => utilisez ceci!

font-family: "Font Awesome 5 Brands"

Voir ici: https://jsfiddle.net/nwodoo32/1/

Pour la méthode SVG avec Javascript

Solide

font-family: "Font Awesome 5 Solid"

Ordinaire

font-family: "Font Awesome 5 Regular"

Marques

font-family: "Font Awesome 5 Brands"

Light (Pro)

font-family: "Font Awesome 5 Light"
17
michaK

Vous devez également activer les pseudo-éléments si vous souhaitez utiliser la police avec les sélecteurs CSS: before ou: after.

<script>
   window.FontAwesomeConfig = {
      searchPseudoElements: true
   }
</script>
2
Wael Wafik

Vous devez changer votre famille de polices et définir le poids de la police.

<ul>
<li class="facebook"> Facebook</li>
<li><i class="fab fa-Twitter-square"></i> Twitter</li>
</ul>

li.facebook:before {
    content: "\f09a";
    font-family: "Font Awesome 5 Brands"; /* change like this */
    font-weight: 900; /* insert this definition */
}
li {
  list-style:none;
}
1
MERT DOĞAN