Fontawesome no funciona cuando se sirve por IIS
-
21-12-2019 - |
Pregunta
FontAwesome no me funciona cuando pongo mi aplicación en IIS7 servidor.
En Firefox la dirección URL solicitada está codificado para que http://l2etest.kema.intra/fonts/fontawesome-webfont.ttf%3Fv=4.0.3
y me sale el error 404.Cuando me cambio %3F
a ?
todo funciona bien.
Lo mismo sucede en IE, pero la solicitud va a eot de la fuente.
Esto es lo que tengo en CSS (lo mismo que en FontAwesome página):
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Creo que el problema es que IIS codifica la Url y en lugar de solicitar ../fonts/fontawesome-webfont.eot?
la solicitud va a ../fonts/fontawesome-webfont.eot%3F
.
Por favor, no sugieren la eliminación de '?' o '#' de la Url.Ellos son a propósito y que son esenciales.La pregunta es cómo hacer que el IIS no para codificar la Url de esa manera.Las pistas que será apreciado.
Editar:Btw.la situación anterior se lleva a cabo cuando en la web.config me puse requestValidationMode y requestPathInvalidCharacters:
<httpRuntime shutdownTimeout="360" maxRequestLength="102400" enable="true" requestValidationMode="2.0" requestPathInvalidCharacters="" />
Sin ella, yo obtener 400 (solicitud incorrecta):Potencialmente peligrosa Solicitud.Valor de la ruta se detectó desde el cliente (?)
Cómo puedo solucionar los IIS para servir a la fuente correctamente?
Edit2: OK, he encontrado la causa del problema.SquishIt agrupación herramienta para MVC3 fue la evolución de los personajes.Cuando yo excluir font-awesome.css desde el haz todo funciona bien.
Solución 4
SquishIt agrupación herramienta para MVC3 fue url de codificación de las rutas de las fuentes, por lo que ../fonts/fontawesome-webfont.eot?
en el archivo css fue cambiado a ../fonts/fontawesome-webfont.eot%3F
.Esto normalmente se devuelve 400, debido a que %3F se considera peligroso.Si establece requestPathInvalidCharacters=""
a continuación, %3F se considera segura, pero obviamente no hay ningún archivo `../fonts/fontawesome-webfont.eot%3F`, por lo tanto 404.
He quitado fontawesome.css de la agrupación y todo funciona bien.
Otros consejos
¿Por qué es @font-face tirar un error 404 en woff archivos?
Agregar los tipos MIME en el configuración web:
<system.webServer>
<staticContent>
<remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
</staticContent>
</system.webServer>
Usted puede abrir IIS, punto a su sitio web, En La sesión de IIS, seleccione Los Tipos MIME.Después de los Tipos Mime vista que muestra, haga clic en Agregar -> En el cuadro de diálogo:
- Extensión de nombre de archivo: .woff
- Los tipos MiME: application/x-font-woff
haga clic en ACEPTAR.
Hecho.
Esta Respuesta no es para el problema anterior Pero para aquellos que se enfrentan a error similar pero diferente debido a la razón y de la tierra para arriba en este hilo.
Me enfrenté a un problema similar, pero más tarde encontró que IIS estaba tratando de buscar font-awesome woff,eot de los archivos en la carpeta MyIpAddress/fonts/fontawesome-webfont.woof
pero yo tenía los archivos en diferentes carpetas.Mover el fontawesome-webfont.eot, fontawesome-webfont.svg,fontawesome-webfont.ttf, fontawesome-webfont.woff
en mi carpeta de fuentes resuelto mi problema
para mí sólo añadiendo el bootstrap CDN enlace resuelto el problema
para la página:
<head>
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
...
</head>
Jugando con IIS sever es arriesgado, en lugar de que traté de otro truco que era 100% de éxito.
Paso 1
Cambiar el nombre de la fuente de nombres de archivos mediante la adición .jpg al final de los archivos.
fontawesome-webfont.eot.jpg (igualmente)
A continuación, Cambiar los tipos de Archivo en fontawesome.css representación de la fuente de las líneas de
*/@font-face{font-family:'FontAwesome'; src:url('../fonts/fontawesome-webfont.eot.jpg?v=4.0.3'); src:url('../fonts/fontawesome-webfont.eot.jpg?#iefix&v=4.0.3') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff.jpg?v=4.0.3') format('woff'),url('../fonts/fontawesome-webfont.ttf.jpg?v=4.0.3') format('truetype'),url('../fonts/fontawesome-webfont.svg.jpg?v=4.0.3#fontawesomeregular') format('svg');
Si usted está usando CodeIgniter bajo IIS7 :
En su web.archivo de configuración, agregar woff a la patrón
<rule name="Rewrite CI Index">
<match url=".*" />
<conditions>
<add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" />
</conditions>
<action type="Rewrite" url="index.php/{R:0}" />
</rule>
Espero que ayude !
He cambiado de woff2 a woff y salió bien.
Si vas a agregar FontAwesome a través de la agrupación, se puede tirar el woff2 url.Consulte la siguiente solución en un hilo similar donde CssRewriteUrlTransform
se utiliza para modificar el url:https://stackoverflow.com/a/22700610/746984
El uso de este cdn en su index.html la página...
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">