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

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.

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 2: haga clic en el Addbotón del Actionsmenú:

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:

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

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">

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í.

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.

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');}