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

tooltip bootstrap 4

Question

Básicamente obtuve el siguiente HTML:

<button class="disabled btn-primary btn" type="submit" disabled="">
<i class="glyphicon glyphicon-ban-circle"></i>
Log in
</button>

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

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:

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.

Answer 1

Recientemente tuvimos un problema similar (aunque estábamos usando metroUI - http://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 fuentes se cargó.

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

y modern.css estaba haciendo referencia a fuentes 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 fuentes 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.

Answer 2

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

Answer 3

Para que los iconos funcionen, tuve que configurar los permisos de la carpeta a "todos = leer" en la carpeta en la que estaba la imagen