Los íconos de Bootstrap se cargan localmente pero no cuando están en línea

Básicamente obtuve el siguiente HTML:

 

Localmente, el ícono se muestra bien en el botón, pero cuando ejecuto Windows Azure obtengo el siguiente botón con un prefijo de apariencia extraña en lugar del ícono:

enter image description here Al analizar esto, me di cuenta de que al acceder a mi sitio web localmente, el navegador intentaba cargar el archivo: /Content/fonts/glyphicons-halflings-regular.woff (lo que hizo con éxito) mientras que en línea (en azul) intentaba cargar en: /fonts/glyphicons-halflings-regular.woff

¿Por qué no pone el prefijo / Content que lo hace localmente?

Estoy usando los archivos de arranque estándar y son los mismos sitios web EXACTOS que se ejecutan localmente y en línea.

También estoy agrupando el contenido de la siguiente manera:

  bundles.Add(new StyleBundle("~/Content/bootstrapcss").Include( "~/Content/bootstrap/bootstrap.css")); 

Y la estructura del archivo se ve de la siguiente manera:

enter image description here

También bootstrap está buscando los archivos de esta manera:

 url('../fonts/glyphicons-halflings-regular.woff') 

Así que supongo que se verá en la carpeta de contenido y no en la raíz, ya que actualmente reside en la carpeta Content / bootstrapcss.

Recientemente tuvimos un problema similar (aunque estábamos usando metroUIhttp://metroui.org.ua/ ). Básicamente resultó que estábamos agrupando los archivos CSS y debido a eso cuando implementamos la aplicación en Windows Azure, ninguna de las fonts se cargó.

En nuestro caso, teníamos la siguiente estructura de directorio:

enter image description here

y modern.css estaba haciendo referencia a fonts como

 ../fonts/iconFont.eot 

y estábamos agrupando el archivo CSS así:

 bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/css/modern.css", "~/Content/css/modern-responsive.css")); 

Debido a la agrupación, la aplicación buscaba fonts en el directorio /fonts en la raíz de la aplicación que obviamente no estaba allí.

Para resumir, terminamos cambiando el nombre del paquete:

 bundles.Add(new StyleBundle("~/Content/css/metroUI").Include( "~/Content/css/modern.css", "~/Content/css/modern-responsive.css")); 

Una vez que se cambió el nombre del paquete, las cosas comenzaron a funcionar correctamente.

Cambiar el camino funciona, pero la “pregunta respondida” omitió un punto vital.

Si usa _Layout.cshtml que hace referencia al paquete, ya no funcionará localmente ni en Azure.

¡Necesita actualizar la página _Layout.cshtml también!

Entonces, si cambia la ruta de sus paquetes de Content/css a Scripts/css entonces necesita cambiar _Layout.cshtml a @Styles.Render("~/Scripts/css") respetuosamente.

Si ha descargado un theme.zip o theme.rar que incluye los íconos de arranque, antes de extraerlo haga lo siguiente:

  • haga clic derecho en el paquete comprimido
  • marca la casilla “desbloquear” si está visible

Para que los icons funcionen, tuve que establecer los permisos de la carpeta como “todos = leer” en la carpeta en la que estaba la imagen

Encontró este error con la aplicación web ASP.NET Core 2.0 MVC al publicar en Azure Web Service.

Tenía mis hojas de estilo dentro del siguiente código.

        

Simplemente copiar y pegar los enlaces en cualquier entorno además del Desarrollo funcionó