La police Awesome 5 sur les pseudo-éléments montre un carré au lieu d'une icône
J'essaie de changer le contenu d'un span avec une icône Font Awesome directement à partir de la page CSS, mais je n'arrive pas à le faire fonctionner correctement.
1) J'ai importé FA de la documentation et dans le <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
2) Mon code HTML ressemble à ceci:
<span class='myClass'>Movies</span>
3) Disons maintenant que je voudrais changer le contenu de la plage avec une icône directement à partir de la page CSS.
Mon css ressemble actuellement à ceci mais il ne fonctionne pas, il me donne un carré à la place de l'icône.
.myClass {
visibility: hidden;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: '\f008';
visibility: visible;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<span class='myClass'>Movies</span>Ce qui est drôle, c’est qu’il semble fonctionner avec certaines icônes. Si je teste avec content: '\f007'; Ça marche. Une idée pourquoi?
(Et si vous vous demandez pourquoi je veux changer l'icône directement dans le CSS, c'est parce que j'utilise des requêtes multimédia, je ne peux donc pas l'ajouter directement dans la page HTML)
Lisez ceci si vous utilisez la version JS + SVG: Le remplacement de Font Awesome 5 sur la balise <li> montre un carré vide
Vous devez spécifier font-weight:900 (ou toute valeur supérieure à 600, bold ou bolder) pour celui-ci.
.myClass {
visibility: hidden;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f008";
visibility: visible;
font-weight: 900;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<span class='myClass'>Movies</span>La version regular de l’icône, définie par la valeur par défaut font-weight est PRO, une case vide apparaîtra. Ce dont vous avez besoin est la version solid:
https://fontawesome.com/icons/film?style=solid
Pourquoi l'autre icône fonctionne-t-elle?
Parce que le \f007 est cette icône: https://fontawesome.com/icons/user?style=regular et comme vous pouvez le constater, le regular n’est pas un PRO et est inclus dans le paquet gratuit afin que vous n'ayez pas besoin de spécifier un font-weight. Vous devez uniquement le spécifier lorsque vous souhaitez afficher la version solid.
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f007";
visibility: visible;
font-weight: 900;
}
.myClass-1::after {
font-family: 'Font Awesome 5 Free';
content: "\f007";
visibility: visible;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<span class='myClass'>Solid </span>
<br>
<span class='myClass-1'>Regular </span>En remarque, toutes les versions de light sont PRO, il n’existe donc pas de font-weight pour eux dans le package gratuit.
Vous pouvez consulter la documentation pour plus de détails: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
Questions connexes
Le remplacement de Font Awesome 5 sur la balise <li> montre un carré vide