web-dev-qa-db-fra.com

Police Awesome & Unicode

J'utilise (l'excellent) Font-Awesome sur mon site et tout fonctionne correctement si je l'utilise de cette façon:

<i class="icon-home"></i>

Mais (pour certaines raisons), je souhaite l’utiliser de la manière Unicode, par exemple:

<i>&#xf015;</i>

( Feuille de calcul de Font Awesome )

Mais cela ne fonctionne pas - le navigateur affiche un carré.

Comment résoudre ce problème? Le chemin CSS est correct (en tant que première façon d'utiliser Font Awesome).

Edit: J'ai le FontAwesome.otf installé.

htmlcssunicodefont-awesome
45
matan129

Cela ne fonctionne pas, car <i>&#xf015;</i> demande simplement au navigateur d’afficher le point de code d’utilisation privée U + F015 en italique. Le code CSS Font Awesome n'a rien qui puisse affecter cela. Si vous ajoutez class=icon-home à la balise, vous obtiendrez le glyphe attribué à U + F015 dans la police FontAwesome, mais vous l'obtiendrez deux fois, en raison du fonctionnement de la super astuce Font Awesome.

Pour obtenir le glyphe une seule fois, vous devez utiliser CSS qui demande l'utilisation de la police FontAwesome sans déclencher les règles qui ajoutent un glyphe via le contenu généré. Une astuce simple consiste à utiliser un nom de classe commençant par icon- mais ne correspond à aucun des noms prédéfinis dans Font Awesome ni à aucun autre nom utilisé par ailleurs dans votre code CSS ou JavaScript. Par exemple.,

<i class=icon-foo>&#xf015;</i>

Vous pouvez également utiliser du code CSS qui définit font-family: FontAwesome et font-style: normal sur l'élément i.

PS Notez que les points de code d’utilisation privée tels que U + F015 n’ont, par définition, aucune signification interopérable. Par conséquent, lorsque les feuilles de style sont désactivées, &#xf015; ne sera affiché comme aucun caractère; le navigateur utilisera sa manière de communiquer la présence de données non définies, telles qu'une petite boîte contenant éventuellement le numéro de code.

44
Jukka K. Korpela

Vous devez utiliser la classe fa:

<i class="fa">
   &#xf000;
</i>

<i class="fa fa-2x">
   &#xf000;
</i>
35
Behrang

J'ai eu un problème similaire avec Unicode et Fontawesome. quand j'ai écrit:

font-family: 'Font Awesome\ 5 Free';
content: "\f061"; /* FontAwesome Unicode */

Sur Google Chrome, un carré apparaît à la place de l'icône. La nouvelle version de Font Awesome nécessite également

font-weight: 900;

C'est un travail pour moi.

De: https://github.com/FortAwesome/Font-Awesome/issues/11946

J'espère que ça va aider.

33
Basile

Pour ceux qui peuvent tomber sur ce post, vous devez définir

font-family: FontAwesome;

en tant que propriété dans votre sélecteur CSS, puis unicode fonctionnera correctement en CSS

23
donnelj

J'ai trouvé que dans Font-Awesome version 5 (gratuite), vous avez ajouté: "font-family: Font Awesome\5 Free;" mais alors, il semble fonctionner correctement.

Cela a fonctionné pour moi :)

J'espère que certains trouvent cela utile

6
Bmuzammil

J'ai trouvé que cela fonctionnait

content: "\f2d7" !important;
font-family: FontAwesome !important;

Cela ne semblait pas fonctionner sans le! Important pour moi.

Voici un tutoriel sur la façon de changer les icônes sociales avec Unicodes https://www.youtube.com/watch?v=-jgDs2agkE0&feature=youtu.be

2
Web Limitless

Après avoir lu la réponse de davidhund à propos de cette page , je suis venu avec une solution selon laquelle votre police Web n'est pas chargée correctement et que le problème est que les chemins sont erronés.

Voici ce qu'il a dit:

Ma première hypothèse est que vous incluez le webfont FontAwesome provenant d'un (sous) domaine différent. Veillez donc à définir les en-têtes corrects sur ces fichiers WebFont: "vous devrez ajouter l'en-tête Access-Control-Allow-Origin, en inscrivant dans la liste blanche le domaine sur lequel vous extrayez l'actif." https://github.com/h5bp/html5boilerplate.com/blob/master/src/.htaccess#L78-86

Et regardez aussi le font-gotchas :)

J'espère que je suis clair et vous a aidé :)

Sur la même page, f135ta a déclaré:

... J'ai résolu le problème en téléchargeant le fichier "fontawesome-webfont.ttf" sur mon serveur Web et en l'installant comme une police normale .. Je ne sais pas si sa partie de la pré-req pour l'utiliser de toute façon, mais cela fonctionne pour moi ;-

1
Mohammad Areeb Siddiqui

Veillez à charger le style FontAwesome avant le vôtre.

font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f007";

Vous pouvez trouver les explications de FontAwesome ici: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

1
Yoann Carrer

Vous pouvez également utiliser l'icône FontAwesome avec le pseudo-sélecteur CSS3, comme indiqué ci-dessous. enter image description here

Assurez-vous de définir FontAwesome sur la famille de polices, comme indiqué ci-dessous:

table.dataTable thead th.sorting:after {font-family: FontAwesome;}

Pour que ce qui précède fonctionne, vous devez procéder comme suit:

  1. Téléchargez la bibliothèque css de FontAwesome ici FontAwesome v4.7.
  2. Extrayez-vous du fichier Zip et incluez-les dans le dossier racine de votre application, comme indiqué ci-dessous: enter image description here
  3. Référencez uniquement le dossier css dans le fichier <head></head> section de votre application comme indiqué ci-dessous: enter image description here
1
Frederick Eze

N'oubliez pas que vous devrez peut-être également inclure un numéro de version car vous pourriez utiliser:

font-family: 'Font Awesome 5 Pro';

ou

font-family: 'Font Awesome 5 Free';
0
omarjebari

Juste pour ajouter à la réponse de Jukka K. Korpela ci-dessus, la police de caractères géniale a déjà défini un sélecteur de css "fa". Vous pouvez simplement faire <i class="fa">&#xf015;</i>. Le problème ici est que fa définit le style de police: normal, si vous avez besoin d’italique, vous pouvez remplacer comme <i class="fa" style="font-style:italic">&#xf015;</i>

0
kali sharma

Je sais que vous pouvez choisir parmi trois familles de polices différentes et chacune a son propre élément de pondération qui doit être appliqué:

Première

font-family: 'Font Awesome 5 Brands'; content: "\f373";

Seconde

font-family: 'Font Awesome 5 Free'; content: "\f061"; font-weight: 900;

Troisième

font-family: 'Font Awesome 5 Pro';

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

J'espère que cela t'aides.

0
Abhishek R