Cómo eliminar el error sobre glyphicons-halflings-regular.woff2 no ​​encontrado

95

La aplicación ASP.NET MVC4 Bootstrap 3 se ejecuta desde Microsoft Visual Studio Express 2013 para Web IDE.

La consola de Chrome siempre muestra un error

http://localhost:52216/admin/fonts/glyphicons-halflings-regular.woff2
Failed to load resource: the server responded with a status of 404 (Not Found)

Este archivo existe en el directorio de fuentes del Explorador de soluciones. La acción de compilación se establece en "Contenido" y Copiar en el directorio de salida es "No copiar como en otros archivos de fuentes". Bootstrap 3 se agrega a la solución usando NuGet. ¿Cómo solucionar este problema para que no se produzca este error? La aplicación muestra correctamente los iconos Glyphicon y FontAwesome. Este error siempre ocurre al iniciar la aplicación.

asp.net-mvc twitter-bootstrap visual-studio asp.net-mvc-4 glyphicons Andrus
fuente

Respuestas:

238

Este problema ocurre porque IIS no conoce woffy woff2archiva los tipos de mime.

Solución 1:

Agregue estas líneas en su proyecto web.config:

 <system.webServer>
  ...
  </modules>
    <staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>

Solución 2:

En la página del proyecto de IIS:

Paso 1: Vaya a la página de inicio de IIS de su proyecto y haga doble clic en el MIME Typesbotón:

Paso 1

Paso 2: haga clic en el Addbotón del Actionsmenú: Paso 2

Paso 3: En el medio de la pantalla aparece una ventana y en esta ventana debe agregar las dos líneas de la solución 1: Paso 3

TotPeRo
fuente
Esto me solucionó, pero ¿por qué? Agradecería una explicación de por qué la solución funciona más que una simple copia / pegado sin sentido del código proporcionado.
Bpainter
3
@Bpainter La primera línea de esta respuesta le dice por qué. Los tipos de mímica no están asociados a un tipo, por lo que el navegador no los carga. ¿Por qué un navegador no carga un archivo de tipo mime no asociado? Creo que esa es una pregunta aparte cuya respuesta no conozco.
Camille Sévigny
4
@ CamilleSévigny Creo que la respuesta a su pregunta es que IIS solo pone a disposición tipos de archivo válidos, por lo que, dado que no reconoce las extensiones .woff y .woff2, responde a las solicitudes de estos archivos con 404 - no encontrado.
Grungondola
@ CamilleSévigny Gracias, cuando hice ese comentario, la primera línea no estaba allí. Fue editado después del hecho. Sin tu comentario, aunque nunca lo habría visto.
Bpainter
En mi caso, el problema fue CssRewriteUrlTransform que usé en el paquete de bootstrap y Font-Awesome. Si conserva su estructura de carpetas normal, no es necesario utilizar esta opción.
g_brahimaj
47

En mi caso, acabo de descargar el archivo que falta directamente desde aquí: https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

Reza Mamun
fuente
7
me lo resolvió. Gracias. Descargué los archivos y guardé la carpeta de fuentes en el directorio de mi proyecto. Archivos CSS en la carpeta "css", fuentes en la carpeta "fonts"
CyprUS
1
A veces, las soluciones son bastante simples, y no nos damos cuenta fonts:)
Gracias
6

Agregue este a su html si solo tiene acceso al html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
FMF
fuente
Gracias, esta solución funcionó para mí. Pero, agregar la etiqueta <staticContent> en el web.config según esto - stackoverflow.com/questions/46508793/… - no funcionó para mí.
BUDDHIKA
5

Para mí, el problema era doble: primero, la versión de IIS con la que estaba tratando no sabía sobre el .woff2tipo MIME, solo sobre .woff. Lo arreglé usando IIS Manager en el nivel del servidor, no en el nivel de la aplicación web, por lo que la configuración no se anularía con cada nueva implementación de la aplicación. (En el Administrador de IIS, fui a los tipos MIME, agregué lo que faltaba .woff2y luego actualicé .woff)

En segundo lugar, y lo que es más importante, estaba agrupando bootstrap.cssjunto con algunos otros archivos como "~/bundles/css/site". Mientras tanto, mis archivos de fuentes estaban en formato "~/fonts". bootstrap.cssbusca las fuentes glyphicon en "../fonts", que se tradujeron en "~/bundles/fonts"- ruta incorrecta.

En otras palabras, la ruta de mi paquete era un directorio demasiado profundo. Le cambié el nombre a "~/bundles/siteCss"y actualicé todas las referencias que encontré en mi proyecto. Ahora bootstrap buscó "~/fonts"los archivos glyphicon, que funcionaron. Problema resuelto.

Antes de solucionar el segundo problema anterior, noglyphicon se cargaba ninguno de los archivos de fuentes. El síntoma fue que todas las instancias de glyphiconglifos en el proyecto solo mostraban un cuadro vacío. Sin embargo, este síntoma solo ocurrió en las versiones implementadas de la aplicación web, no en mi máquina de desarrollo. Todavía no estoy seguro de por qué fue así.

Stephen G Tuggy
fuente
3

Probé todas las sugerencias anteriores, pero mi problema real era que mi aplicación buscaba la carpeta / font y su contenido (.woff, etc.) en app / fonts, pero mi carpeta / fonts estaba en el mismo nivel que / app. Moví / fonts debajo de / app, y ahora funciona bien. Espero que esto ayude a alguien más a navegar por la web en busca de una respuesta.

girar
fuente
1

Este problema ocurre porque IIS no encuentra la ubicación real de los tipos de mime de archivo woff2. Establezca la URL de font-face correctamente, también mantenga font-family como glyphicons-halflings-regular en su archivo CSS como se muestra a continuación.

@font-face {
font-family: 'glyphicons-halflings-regular'; 
src: url('../../../fonts/glyphicons-halflings-regular.woff2') format('woff2');}
Diwas Poudel
fuente