Fontawesome no funciona cuando se sirve por IIS

StackOverflow https://stackoverflow.com//questions/23007250

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.

¿Fue útil?

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">
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top