Les polices impressionnantes apparaissent sous forme de boîtes sur IE8
J'utilise donc Font Awesome dans un projet et lors des tests, je rencontre des problèmes avec IE8.
Sous Windows IE9, Chrome et Firefox affichent correctement la police (tout comme Firefox, Chrome et Safari sous OS X) mais IE8 sous Windows a un problème où je obtenir une boîte à la place de la police.
Mon code est:
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>Site title</title>
<!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href=".../css/css.css" rel="stylesheet" type="text/css">
<link href="../css/print.css" rel="stylesheet" type="text/css" media="print">
<link href="../Apple-touch-icon.png" rel="Apple-touch-icon-precomposed">
<link href="../css/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css">
<link href="../css/jquery-ui-overrider.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato|Michroma&subset=latin&v2" rel="stylesheet" type="text/css">
<link href="../css/prettify.css" rel="stylesheet" type="text/css">
<link href="../css/font-awesome.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
<link href="../css/font-awesome-ie7.css" rel="stylesheet">
<![endif]-->
J'ai les quatre fichiers de polices ...
- fontawesome-webfont.eot
- fontawesome-webfont.svg
- fontawesome-webfont.ttf
- fontawesome-webfont.woff
... où ils appartiennent et ils sont lisibles par le monde (755 autorisations). Qu'est-ce que je rate? Dois-je faire quelque chose avec la vue de compatibilité dans IE8?
Le même ordinateur voit très bien les polices sur le site Font Awesome, donc je dois faire quelque chose de mal.
Comme demandé, une copie de font-awesome.css est ici: font-awesome.css . C'est plus ou moins ce que j'ai téléchargé d'eux, à l'exception du chemin d'accès aux fichiers de polices.
Basé sur @ Abody97, j'ai ajouté https://html5shim.googlecode.com/svn/trunk/html5.js dans le mélange (le code ci-dessus a été mis à jour). Toujours pas de chance, même après une actualisation et une actualisation du cache de suppression.
J'ai eu le même problème et j'ai trouvé une solution, je la posterai ici au cas où quelqu'un en aurait encore besoin.
Le problème était que IE n'a pas réussi à charger les fichiers de police, il construisait des requêtes GET étranges qui ont renvoyé 404 erreurs.
En utilisant l'astuce trouvée ici: http://www.fontspring.com/blog/fixing-ie9-font-face-problems J'ai pu résoudre le problème.
Ajouter ?#iefix à l'url eot dans le CSS qui contient la font-face (dans ce cas font-awesome.css)
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Cela semble être un problème très courant et d'après cela discussion a à voir avec le caractère attaché en utilisant: avant. J'ai trouvé le moyen le plus simple de le faire fonctionner dans IE 8 est de ne pas utiliser la classe fa - name et insérez le caractère manuellement.
par exemple. Au lieu de:
<i class="fa fa-user fa-lg"></i>
utilisation:
<i class="fa fa-lg"></i>
Les codes de caractères peuvent être trouvés sur le Font Awesome Cheatsheet . Cela semble fonctionner tout le temps, quelle que soit la version IE.
J'espère que cela aide quelqu'un,
Jason
Essayez d'ajouter ceci à votre head avant d'inclure CSS:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
juste eu le même problème et l'a résolu en définissant le "niveau de sécurité" IE8 à quelque chose en dessous de "High".
En général, je pouvais reproduire les "boîtes" en rendant les fichiers de police (eot, woff, ttf ...) "non disponibles" (par exemple, ce qui entraîne une réponse 404) - donc je suppose, au niveau de sécurité "Élevé", ils ' re simplement pas chargé ...
Il s'avère qu'il y avait un supplément <html> tag généré par un fichier inclus à l'origine de mes problèmes. Donc, dans mon dernier fichier, j'avais à la fois <html lang="en"> ET <html> L'extra <html> la balise jetait IE en mode bizarreries, ce qui causait le problème d'icône de police génial que j'avais.
Éliminer ce voyou <html> et en vérifiant que mes en-têtes ont été définis correctement, j'ai tout corrigé.
J'utilise maintenant un ensemble standard de balises d'en-tête sur toutes les pages:
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta charset="utf-8" />
Avant de l'avoir sur une seule page:
<!DOCTYPE html>
<html lang="en">
<html> <!-- This tag was causing the problem, removing it solved things for me -->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta charset="utf-8" />
IE sous la version 9 ne prend pas en charge le format de fichier woff . C'est probablement la raison pour laquelle vous ne pouvez pas les obtenir sur IE8
Faire le contrôle du cache dans l'en-tête de réponse comme privé pour le fichier de police a parfaitement fonctionné dans IE8 pour moi. Plus d'explications à ce sujet peuvent être trouvées ici - où il explique comment il a résolu pour PDF fichiers ( ne peut pas afficher PDF de HTTPS dans = IE 8 (sur Vista 64 bits) ).
J'espère que cela t'aides.
Sous IIS (environnement MVC), j'ai dû ajouter la règle suivante à mon Web.config:
<system.web>
<httpHandlers>
<add verb="GET" path="*.eot" type="System.Web.StaticFileHandler" />
<add verb="GET" path="*.svg" type="System.Web.StaticFileHandler" />
<add verb="GET" path="*.ttf" type="System.Web.StaticFileHandler" />
<add verb="GET" path="*.woff" type="System.Web.StaticFileHandler" />
<add verb="GET" path="*.otf" type="System.Web.StaticFileHandler" />
</httpHandlers>
</system.web>
La seule chose qui a fonctionné pour moi était la suivante:
https://github.com/FortAwesome/Font-Awesome/issues/2324
Combiné avec l'autre réponse de Jason: par exemple Au lieu de:
<i class="fa fa-user fa-lg"></i>
utilisation:
<i class="fa fa-lg"></i>