web-dev-qa-db-fra.com

Font Awesome 4.2.0 non rendu dans IE11 avec le mode de compatibilité activé "On"

Font Awesome 4.2.0 est parfaitement rendu dans Chrome, Firefox, Safari, Opera et Internet Explorer 11 (mais uniquement avec le mode de compatibilité désactivé). Lorsque le mode de compatibilité est activé, aucun glyphicon ne s'affiche. J'ai essayé d'utiliser un CDN Font Awesome 4.2.0 Font Awesome déjà utilisé dans d'autres projets, en utilisant le CSS Font Awesome et en ajoutant le <meta http-equiv="X-UA-Compatible" content="IE=Edge"> dans le <head> comme suggéré dans un article de GitHub afin de permettre aux glyphes de restituer avec le mode de compatibilité activé. Aucune de ces solutions ne fonctionne et le fait d'activer le mode de compatibilité n'est pas une option pour ce projet. Donc, en conclusion, ma question est la suivante. Comment puis-je activer le rendu de Font Awesome 4.2.0 dans Internet Explorer 11 avec le mode de compatibilité activé?

9
racecarjonathan

Trouvé la solution. <meta http-equiv="X-UA-Compatible" content="IE=Edge"> doit être placé comme tagFIRSTdans le <head> pour que cela fonctionne. J'espère que cela aidera tous ceux qui ont ce problème!

29
racecarjonathan

J'ai eu ce problème avec IE 11 sur ma machine de développement (mais pas ailleurs). Mes options Internet ont été définies pour interdire les téléchargements de polices. Ce ne sera probablement pas courant, car je suis sur Windows Server, mais si c'est le cas, essayez ceci pour le réparer:

[Gear] >> Options Internet >> Sécurité >> Personnaliser le niveau >> Téléchargements >> Téléchargement de Polices >> Activer

6
Jesse Sierks

J'ai également fait face au même problème. Dans mon cas, la correction ci-dessous fonctionne:

Firefox (et, dans une moindre mesure, Chrome et IE) a un problème où il ne parvient pas à télécharger la police et n'affiche donc aucune des icônes correctement.

Un correctif très facile a été identifié dans un certain nombre d'emplacements, cdnjs/cdnjs # 755 étant l'un d'entre eux.

Le correctif consiste à ajouter les éléments suivants au début du fichier font-awesome.css (avant l'appel @ font-family):

Ensemble d'en-têtes Access-Control-Allow-Origin "*" 

Source: https://github.com/thingles/foreground/issues/222

1
naresh goyal

Dans mon cas, il s'agissait d'un display: table défini sur l'élément. Le supprimer a résolu un problème.

0
Nina

J'ai fait face au même problème et je viens d'ajouter le lien suivant dans la balise et cela a fonctionné.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

J'espère que cela t'aides!

0
user1853243

Regardez dans la suppression des balises de version à la fin des fichiers. Ces balises font que IE a des crises.

change ça...

../fonts/fontawesome-webfont.eot?v=4.3.0'

pour ça...

../fonts/fontawesome-webfont.eot'
0
Kickasstimus