web-dev-qa-db-fra.com

L'icône font-awesome n'apparaît pas sur Chrome

Je rencontre un problème qui fait que fontawesome Icon n'apparaît pas sur Chrome. (Safari et Moz fonctionnent correctement). Quelqu'un a-t-il une clé pour expliquer cela? Merci a tous.

Voici l'instantané:

 enter image description here

Je sais que le chemin de police par défaut que fontawawaw.min.css indique ../ font/......, mais j’ai changé le nom du chemin en "../fonts/" pour mon projet mais ne fonctionne toujours pas. L'icône ne s'affiche jamais.

font-awesome
5
alex

Vérifiez si vous avez désactivé votre Adblocker. Parfois, les extensions chrome peuvent empêcher le navigateur d’afficher les icônes. 

5
Satyam Dahiwal

Le bootstrap fonctionne-t-il? Il semble que votre répertoire Css soit en majuscule, ce qui ferait que votre référence au fichier css ne fonctionnerait pas.

Essayez de remplacer 

./css /font-awesome.min.css 

avec 

./Css /font-awesome.min.css

Comme indiqué dans le commentaire de votre question initiale, vous pouvez utiliser le CDN momentanément pour voir si l'icône apparaît. Si l'icône apparaît à l'aide du CDN, vous savez que votre chemin pose un problème, comme je l'ai mentionné ci-dessus. 

Voici le code HTML que vous utiliseriez pour le CDN (version 3.2.1):

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

En dehors de cela, vous utilisez également une version obsolète de font-awesome. Si possible dans votre cas, je vous recommande de passer à la dernière version. Vous pouvez trouver plus d'informations sur la dernière version en visitant le lien suivant.

http://fontawesome.io/get-started/

Si vous allez utiliser la dernière version, veillez à regarder examples car ils ont changé la façon dont vous écrivez le code html. 

Edit après la mise à jour de Font-awesome:

Si vous souhaitez utiliser la dernière version de font-awesome, vous devez modifier le code HTML en

<i class="fa fa-times" aria-hidden="true"></i>

CDN pour la dernière version (4.7):

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
3
Kurt King

Il doit y avoir plusieurs fichiers css .. Vous devez inclure all.min.css (ou) all.css car cela fonctionne bien 

0
Deepanshu Singh

J'ai eu un problème similaire et je l'ai résolu en procédant comme suit:

  1. Ouvrez votre fichier font-awesome.min.css
  2. Recherchez webfonts, qui est le nom de dossier parent par défaut des polices. Si vous en avez trouvé un, remplacez-les par le nom de votre dossier fonts dans votre projet. 

... De cette façon, les références de police à l'intérieur de votre ..min.css pointent sur le chemin de répertoire correct dans lequel vos polices sont :)

J'ai découvert cela en ouvrant chrome dev tools en mode incognito et en regardant le console errors.

0
Rhyan Vargas