Unicode via CSS: avant
J'utilise Font Awesome sur ma page Web et je souhaite afficher une icône à l'intérieur du :before pseudo-élément.
Selon le documentation/feuille de triche , je dois taper  pour obtenir cette police, mais cela ne fonctionne pas. Je pense que c'est normal car les entités HTML ne sont pas supportées dans :before.
J'ai donc cherché un peu dans Google et découvert que si vous voulez afficher des entités HTML dans :before, vous devez utiliser la référence hexadécimale échappée.
Je cherchais donc la référence hexagonale à  mais je n'ai rien trouvé. Je pense que c’est parce que ce sont des valeurs "d’utilisation privée", peu importe ce que cela signifie.
Est-il possible de le faire fonctionner dans :before?
La référence hexagonale échappée de  est \f066.
content: "\f066";
En CSS, FontAwesome Unicode ne fonctionne que lorsque la famille de polices correcte est déclarée (version 4 ou inférieure):
font-family: "FontAwesome";
content: "\f066";
Mise à jour - La version 5 a différents noms:
Libre
font-family: "Font Awesome 5 Free"
Pro
font-family: "Font Awesome 5 Pro"
Marques
font-family: "Font Awesome 5 Brands"
Voir cette réponse: https://stackoverflow.com/a/48004111/2575724
Fileformat.info est une très bonne référence pour ce genre de choses. Dans votre cas, il est déjà en hexadécimal, donc la valeur hexadécimale est f066. Alors tu ferais:
content: "\f066";
Les points de code utilisés dans les tours de police d'icônes sont généralement des points de code à usage privé, ce qui signifie qu'ils n'ont pas de signification définie en général et qu'ils ne doivent pas être utilisés dans un échange d'informations ouvert, mais uniquement sur accord privé entre les parties intéressées. Toutefois, les points de code d’utilisation privée peuvent être représentés comme toute autre valeur Unicode, par ex. en CSS en utilisant une notation comme \f066, comme d'autres l'ont répondu. Vous pouvez même entrer le point de code en tant que tel, si votre document est codé en UTF-8 et que vous savez taper une valeur Unicode arbitraire par son numéro dans votre environnement de création (il est bien entendu affiché normalement à l'aide d'un symbole représentant un caractère inconnu). personnage).
Cependant, ce n'est pas la manière habituelle d'utiliser des polices à icônes. Normalement, vous utilisez un fichier CSS fourni avec la police et utilisez des constructions telles que <span class="icon-resize-small">foo</span>. Le code CSS se chargera alors de l’insertion du symbole au début de l’élément, et vous n’aurez pas besoin de connaître le numéro du point de code.
Commencez par lier le fichier CSS fontwaesome dans votre fichier HTML, puis créez une pseudo-classe after ou before telle que "font-family:" FontAwesome "; content:"\f101 ";" puis enregistrez. J'espère que ça va bien.