asp.net-mvc - solid - glyphicons halflings regular woff2 net:: err_aborted 404

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

Question

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 en el Explorador de soluciones. La acción de compilación se establece en "Contenido" y el directorio Copiar a salida es "No copiar como en otros archivos de fuentes". Bootstrap 3 se agrega a la solución usando NuGet. ¿Cómo arreglar esto para que este error no ocurra? La aplicación muestra los iconos Glyphicon y FontAwesome correctamente. Este error siempre ocurre al inicio de la aplicación.

Answer 1

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

Answer 2

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

Answer 3

Este problema ocurre porque IIS no conoce los tipos mime de archivos woff y woff2 .

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 IIS:

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

Paso 2: haga clic en el botón Add del menú Actions :

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

Answer 4

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

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

Answer 5

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

Answer 6

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

Segundo, y más importante, estaba agrupando bootstrap.css junto con algunos otros archivos como "~/bundles/css/site" . Mientras tanto, mis archivos de fuentes estaban en "~/fonts" . bootstrap.css busca las fuentes de glifos en "../fonts" , que se traducen en "~/bundles/fonts" - ruta incorrecta.

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

Antes de solucionar el segundo problema anterior, ninguno de los archivos de fuente de glyphicon estaba cargando. El síntoma fue que todas las instancias de glifos de glifos 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é ese fue el caso.