css - ttf - Las fuentes Font Awesome se muestran como cuadros en IE8
font-awesome.min.css download (10)
Así que estoy usando Font Awesome en un proyecto y en las pruebas estoy teniendo problemas con IE8.
En Windows IE9, Chrome y Firefox muestran la fuente correctamente (al igual que Firefox, Chrome y Safari en OS X) pero IE8 en Windows tiene un problema en el que aparece un cuadro en lugar de la fuente.
Mi código es:
<!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]-->
Tengo los cuatro archivos de fuentes ...
- fontawesome-webfont.eot
- fontawesome-webfont.svg
- fontawesome-webfont.ttf
- fontawesome-webfont.woff
... donde pertenecen y son legibles por el mundo (755 permisos). ¿Qué me estoy perdiendo? ¿Tengo que hacer algo con la vista de compatibilidad en IE8?
La misma computadora ve las fuentes en el sitio Font Awesome muy bien, así que tiene que ser algo que estoy haciendo mal.
Según lo solicitado, una copia de font-awesome.css está aquí: font-awesome.css . Es más o menos lo que descargué de ellos, con la excepción de la ruta a los archivos de fuentes.
Basado en @ Abody97, agregué https://html5shim.googlecode.com/svn/trunk/html5.js en la mezcla (el código anterior se ha actualizado). Todavía no hay suerte, incluso después de una actualización y una actualización de caché de eliminación.
En IIS (entorno MVC) tuve que agregar la siguiente regla a mi 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>
Esto parece ser un problema muy común y de acuerdo con esta discussion tiene que ver con el carácter que se adjunta utilizando: antes. De hecho, encontré que la manera más fácil de hacerlo funcionar en IE 8 es no usar la clase de fama e insertar el carácter manualmente.
por ejemplo, en lugar de:
<i class="fa fa-user fa-lg"></i>
utilizar:
<i class="fa fa-lg"></i>
Los códigos de los personajes se pueden encontrar en la Hoja de Ayuda de Font Awesome . Esto parece funcionar todo el tiempo, sin importar la versión de IE.
Espero que esto ayude a alguien,
Jason
Hacer el control de caché en el encabezado de respuesta como privado para el archivo de fuente funcionó perfectamente en IE8 para mí. Puede encontrar más explicaciones sobre esto aquí, donde explica cómo resolvió para los archivos PDF ( no se puede mostrar PDF desde HTTPS en IE 8 (en Vista de 64 bits) ).
Espero que esto ayude.
Intente agregar esto a su head antes de incluir CSS:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Lo único que funcionó para mí fue esto:
https://github.com/FortAwesome/Font-Awesome/issues/2324
Combinado con la otra respuesta de Jason: por ejemplo, en lugar de:
<i class="fa fa-user fa-lg"></i>
utilizar:
<i class="fa fa-lg"></i>
No es solo IE, todos los navegadores tienen el mismo problema.
Lo curioso es que necesitas poner tus archivos en el lugar correcto.
Esto significa que necesita la siguiente estructura:
folder levels look like this:
level 1 level 2 level 3
----index.html
----font-awesome-4.2.0 ----css ---- fontawesome.css
----css ---- fontawesome.min.css
----fonts----...
----...
----...
y luego ponga el enlace sylte en su index.html como
<link rel="stylesheet" href="./font-awesome.min.css"> en medio de la cabeza
una nota muy importante es: NO intente COMBINAR la carpeta fontawesome ni ninguna otra carpeta. Mantenlos separados.
ahora pruébelo, y todo está bien para ir.
Resultó que había una etiqueta <html> adicional generada por un archivo incluido que era el origen de mis problemas. Por lo tanto, en mi archivo final tenía ambas <html lang="en"> AND <html> La etiqueta <html> extra lanzaba IE en el modo peculiar, lo que causaba el problema con el ícono de fuente impresionante que estaba teniendo.
La eliminación de ese pícaro <html> y la verificación de mis encabezados se establecieron correctamente arreglaron todo para mí.
Ahora estoy usando un conjunto repetitivo de etiquetas de encabezado en todas las páginas:
<!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" />
Antes de tener esto en una página:
<!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" />
Tuve el mismo problema y encontré una solución, la publicaré aquí en caso de que alguien aún la necesite.
El problema fue que IE no pudo cargar los archivos de fuentes, estaba construyendo solicitudes GET extrañas que arrojaban errores 404.
Utilizando el truco que se encuentra aquí: http://www.fontspring.com/blog/fixing-ie9-font-face-problems Pude solucionar el problema.
Agregue ?#iefix a la url actual en el CSS que contiene la fuente-cara (en este caso 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 */
}
acaba de tener el mismo problema y lo resolvió estableciendo el IE8 "nivel de seguridad" en algo por debajo de "Alto".
En general, podría reproducir las "cajas" haciendo que los archivos de fuentes (eot, woff, ttf ...) "no estén disponibles" (por ejemplo, dando como resultado una respuesta 404) - así que supongo, en el nivel de seguridad "Alto" ellos '' simplemente no está cargado ...