Unicode via CSS :before

Question

J'utilise Font Awesome sur ma page web et je veux afficher une icône à l'intérieur de l'icône :before pseudo-élément.

Selon la documentation/feuille de contrôle 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 prises en charge par :before .
J'ai donc fait quelques recherches et j'ai découvert que si l'on veut afficher des entités HTML dans le format :before vous devez utiliser la référence hexagonale échappée.
J'ai donc cherché la référence hexagonale à  mais je n'ai rien trouvé. Je pense que c'est parce qu'il s'agit de valeurs "à usage privé", quoi que cela signifie.

Existe-t-il un moyen de le faire fonctionner dans :before ?

Answer 1

En CSS, FontAwesome unicode ne fonctionne que lorsque la famille de polices correcte est déclarée (version 4 ou moins) :

font-family: "FontAwesome";
content: "\f066";

Mise à jour - La version 5 porte des noms différents :

Gratuit

font-family: "Font Awesome 5 Free"

Pro

font-family: "Font Awesome 5 Pro"

Marques

font-family: "Font Awesome 5 Brands"

Voir la réponse correspondante : https://stackoverflow.com/a/48004111/2575724

Comme indiqué dans le commentaire (BuddyZ), voici quelques informations supplémentaires https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started

Answer 2

La référence hexagonale échappée de  es \f066 .

content: "\f066";

Answer 3

Fileformat.info est une très bonne référence en la matière. Dans votre cas, c'est déjà en hexadécimal, donc la valeur hexadécimale est f066 . C'est ce que vous feriez :

content: "\f066";

Answer 4

Les points de code utilisés dans les polices d'icônes sont généralement des points de code à usage privé, ce qui signifie qu'ils n'ont pas de signification généralement définie et qu'ils ne doivent pas être utilisés dans le cadre d'un échange d'informations ouvert, mais uniquement dans le cadre d'un accord privé entre les parties intéressées. Toutefois, les points de code Private Use peuvent être représentés comme n'importe quelle autre valeur Unicode, par exemple en CSS à l'aide d'une notation telle que \f066 comme d'autres l'ont déjà fait. Vous pouvez même saisir le point de code en tant que tel, si votre document est codé en UTF-8 et que vous savez comment saisir une valeur Unicode arbitraire par son numéro dans votre environnement de création (mais bien sûr, elle serait normalement affichée à l'aide d'un symbole pour un caractère inconnu).

Cependant, ce n'est pas la manière habituelle d'utiliser les polices d'icônes. Normalement, vous utilisez un fichier CSS fourni avec la police et vous utilisez des constructions telles que <span class="icon-resize-small">foo</span> . Le code CSS se chargera alors d'insérer le symbole au début de l'élément, sans qu'il soit nécessaire de connaître le numéro du point de code.

Answer 5

Tout d'abord, liez le fichier CSS fontwaesome dans votre fichier HTML puis créez une pseudo classe après ou avant comme "font-family : "FontAwesome" ; content : " \f101 " ;", puis enregistrer. J'espère que cela fonctionnera bien.