Bootstrap 3 Glyphicons no funcionan

Descargué el progtwig de arranque 3.0 y no puedo hacer que los glyphicons funcionen. Recibo algún tipo de error “E003”. ¿Alguna idea de por qué está pasando esto? Intenté tanto a nivel local como en línea y todavía tengo el mismo problema.

Estaba teniendo el mismo problema y no pude encontrar ninguna información al respecto excepto en los comentarios ocultos en esta página. Mis archivos de fuente se cargaban correctamente según Chrome, pero los icons no se mostraban correctamente. Estoy haciendo de esto una respuesta, así que espero que ayude a otros.

Algo estaba mal con los archivos de fonts que descargué de la herramienta de personalización de Bootstrap 3. Para obtener las fonts correctas, vaya a la página de inicio de Bootstrap y descargue el archivo completo .zip. Extraiga los cuatro archivos de fonts de allí a su directorio de fonts y todo debería funcionar.

Nota para los lectores: asegúrese de leer el comentario de @ user2261073 y la respuesta de @ Jeff acerca de un error en el personalizador. Es probable que sea la causa de tu problema.


El archivo de fuente no se está cargando correctamente. Verifica si los archivos están en su ubicación esperada.

@font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } 

Como lo indicó Daniel, también podría ser un problema de tipo mimético. Las herramientas de desarrollo de Chrome muestran las fonts descargadas en la pestaña de red:

Descarga de la fuente de la pestaña de la red de Chrome

En mi caso, obtenía un 404 para glyphicons-halflings-regular.woff y glifos no visibles en navegadores móviles.

Parece que hay cierta confusión sobre el tipo MIME para woff, más de un tipo MIME es aceptado por diferentes navegadores, pero el W3C dice :

 application/font-woff 

Editar: Después de probar el siguiente tipo MIME para woff funciona en todos los navegadores actualmente:

 application/x-font-woff 

Editar: Última versión de Bootstrap en este momento (3.3.5) usa fonts .woff2 con el mismo resultado inicial que .woff, el W3C sigue definiendo la especificación, pero en este momento el tipo MIME parece ser:

 application/font-woff2 

-Si siguió la respuesta mejor calificada y sigue sin funcionar :

La carpeta de Font DEBE estar en el mismo nivel que su carpeta CSS. La reparación de la ruta en bootstrap.css no funcionará.

Bootstrap.css tiene que navegar a la carpeta Fonts exactamente así:

 @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); } 

Si las otras soluciones no funcionan, es posible que desee intentar importar Glyphicons desde una fuente externa, en lugar de confiar en que Bootstrap haga todo por usted. Para hacer esto:

Puedes hacer esto en HTML:

  

O CSS:

 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css") 

Gracias a edsiofi por este hilo: Bootstrap 3 Glyphicons CDN

Estaba revisando esta vieja pregunta mía y dado que la que se suponía que era la respuesta correcta hasta ahora, la di en los comentarios, creo que también merezco el mérito por ello.

El problema radicaba en el hecho de que los archivos de fonts de glyphicon descargados de la herramienta de personalización de bootstrap no eran los mismos que los descargados de la redirección encontrada en la página de inicio de bootstrap. Los que están funcionando como deberían son los que se pueden descargar desde el siguiente enlace:

 http://getbootstrap.com/getting-started/#download 

Cualquier persona que tenga problemas con los viejos archivos del mal personalizador debe sobrescribir las fonts desde el enlace de arriba.

Los sitios web de Azure carecen de la configuración MIME woff . Debe agregar la siguiente entrada en web.config

        

Como se describió en @Stijn, la ubicación predeterminada en Bootstrap.css es incorrecta al instalar este paquete desde Nuget .

Cambie esta sección para que se vea así:

 @font-face { font-family: 'Glyphicons Halflings'; src: url('Content/fonts/glyphicons-halflings-regular.eot'); src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } 

IIS no .woff archivos .woff de manera predeterminada, por lo que en IIS deberá agregar una entrada a su archivo web.config ;

 < ?xml version="1.0" encoding="UTF-8"?>        

Modifiqué mi archivo less variables.less Modifiqué la variable

 @icon-font-path: "fonts/"; 

el original era

 @icon-font-path: "../fonts/"; 

Estaba causando un problema

En caso de que alguien más termine aquí y use Bootstrap> = v4.0: la compatibilidad con glyphicon se elimina

La parte relevante de las notas de la versión:

Se cayó la fuente del icono de Glyphicons. Si necesita icons, algunas opciones son:

la versión upstream de Glyphicons

Octicons

Fuente impresionante

Fuente: https://v4-alpha.getbootstrap.com/migration/#components

Si desea utilizar glyphicons, debe descargarlo por separado.

Personalmente probé Font Awesome y es bastante bueno. Agregar icons es similar a la manera glypicon:

  

Esto se debe a una encoding errónea en bootstrap.css y bootstrap.min.css. Cuando descarga Bootstrap 3.0 del Personalizador, falta el siguiente código:

 @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } 

Dado que este es el código principal para usar Glyphicons, no funcionará de …

Descargue los archivos css del paquete completo y este código se implementará.

¿Tiene todos los archivos a continuación en su directorio de fonts?

 glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff 

Otro problema / solución puede ser tener este código de Bootstrap 2.x:

  

y al migrar según la guía ( .icon-* ---> .glyphicon .glyphicon-* ):

  

te olvidas de agregar la clase de icono (que contiene la referencia de fuente):

  

A continuación es lo que lo solucionó para mí. Estaba obteniendo el error “URI incorrecto” en la consola de Firebug. Los icons aparecían como números E ###. Tuve que agregar un archivo .htaccess en mi directorio ‘fonts’. Header set Access-Control-Allow-Origin "*" Posible duplicado de: Fuente descargable en firefox: URI incorrecto o acceso entre sitios no permitido

Esta fue la razón por la cual los íconos no se presentaron:

 * { arial, sans-serif !important; } 

Después de haber eliminado esta parte de mi CSS , todo funcionó como debería. El! Importante era el que causaba problemas.

Esta es una sesión muy larga, pero fue mi caso y ya que no está aquí.

Si está comstackndo Twitter Bootstrap desde SASS, utilice gulp-sass o grunt-sass es decir. node-sass . Asegúrese de que los módulos de su nodo estén actualizados, especialmente si está trabajando en un proyecto bastante antiguo.

Resulta que, desde hace un tiempo, la directiva SASS @at-root se usa en la definición de @font-face en glyphicons, consulte https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets /stylesheets/bootstrap/_glyphicons.scss .

El gotcha aquí es ese node-sass es decir. libsass no admite la directiva @at-root si es demasiado antigua. Si este es el caso, obtendrá un @font-face envuelto en un @at-root que el navegador no tiene idea de qué hacer. El resultado de esto es que no se descargará ninguna fuente y es probable que vea basura en lugar de icons.

Nota: a continuación es probable que sea un escenario de nicho, pero quería compartirlo en caso de que alguien más lo encuentre útil.

En un proyecto de Rails, estamos reutilizando un poco a través de una gem que es un motor de Rails que usa bootstrap-sass . Todo estuvo bien en el proyecto principal a excepción de la resolución de ruta de fuente de glyphicon.

 GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found) 

Descubrimos que $bootstrap-sass-asset-helper era false durante la resolución cuando esperábamos que fuera cierto, por lo que la ruta era diferente.

Hicimos que se $bootstrap-sass-asset-helper en la gem del motor haciendo:

 // explicit sprockets import to get glyphicon font paths correct @import 'bootstrap-sprockets'; @import "bootstrap/variables"; 

por ejemplo, esto causó que la ruta se resolviera a:

 /assets/bootstrap/glyphicons-halflings-regular.woff 

De nuevo, esto no debería ser necesario en ningún proyecto de Rails normal que use bootstrap-sass , simplemente estamos reutilizando muchas vistas y esto funcionó para nosotros. Con suerte, esto puede ayudar a otra persona.

Esto es lo que dice la documentación oficial con respecto a las fonts que no se procesan.

Cambio de la ubicación de la fuente del icono Bootstrap supone que los archivos de fonts del icono se ubicarán en el directorio ../fonts/, en relación con los archivos CSS comstackdos. Mover o renombrar esos archivos de fonts significa actualizar el CSS de una de tres maneras: Cambie las variables @ icon-font-path y / o @ icon-font-name en los archivos Less de origen. Utilice la opción relativa de URL proporcionada por el comstackdor Less. Cambie las rutas url () en el CSS comstackdo. Use la opción que mejor se adapte a su configuración de desarrollo específica.

Aparte de eso, podría ser que no haya copiado la carpeta de fonts en el directorio raíz

Tuve este problema y fue causado por el archivo variables.less. Anularlo para establecer el valor icon-font-path resolvió el problema.

El archivo estructurado se ve así:

 \Content \Bootstrap \Fonts styles.less variables.less 

Al agregar mi propio archivo variables.less en la raíz del contenido y al hacer referencia a esto en styles.less, se resolvió el error 404.

Variables.less contiene:

 @icon-font-path: "fonts/"; 

Tengo Bootstrap de NuGet. Cuando publiqué mi sitio, los glifos no funcionaron.

En mi caso, lo conseguí trabajando estableciendo Build Action para cada uno de los archivos de fuente en ‘Content’ y configurándolos en ‘Copy Always’.

Asegúrate de no sobreespecificar la familia de fonts, por ejemplo

 *{font-family: Verdana;} 

eliminará la fuente halflings de i elementos.

Estaba teniendo el mismo problema cuando el navegador no pudo encontrar los archivos de fonts, y mi problema se debió a exclusiones en mi archivo .htaccess que incluía en la lista blanca archivos que no deberían enviarse a index.php para su procesamiento. Como el archivo de fuente no se pudo cargar, los caracteres se reemplazaron por BLOB.

 RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$ RewriteCond %{REQUEST_URI} !-d RewriteRule ^ index.php [L,QSA] 

Como puede ver, los archivos como imágenes, rss y xml están excluidos de la reescritura, pero los archivos de fonts son archivos .woff y .woff2 , por lo que también es necesario agregarlos a la lista blanca.

 RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$ RewriteCond %{REQUEST_URI} !-d RewriteRule ^ index.php [L,QSA] 

Agregar woff y woff2 a la lista blanca permite cargar los archivos de fonts, y los glifos deberían mostrarse correctamente.

Debe establecer por este orden:

   

Lo que funcionó para mí fue reemplazar las rutas de:

 @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } 

a

 @font-face { font-family: 'Glyphicons Halflings'; src: url('/assets/glyphicons-halflings-regular.eot'); src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); } 

tenía un código de ancho de caja \ e094 para glyphicon-arrow-down, de hecho, resolví el problema añadiendo glyphicon en la clase css así:

  

si pudiera ayudar a alguien …

Así es como se incluye el ícono en bootstrap 3

  

http://glyphicons.bootstrapcheatsheets.com/

Espero que ayude.

 @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');} 

Estoy usando bootstrap con namespace y glyphicons que no funcionan, pero después de agregar la línea anterior en glyphicons de código funcionan bien.

Acabo de renombrar la fuente de bootstrap.css usando Ctrl + c, Ctrl + v y funcionó.

Debe establecer por este orden: