Bootstrap 3 Glyphicons no funcionan


360

Descargué bootstrap 3.0 y no puedo hacer que funcionen los glifos. Recibo algún tipo de error "E003". ¿Alguna idea de por qué está sucediendo esto? Lo intenté tanto local como en línea y sigo teniendo el mismo problema.


1
¿de dónde sacas el error?
Daniel A. White

1
En cualquier lugar donde inserte los iconos ... Aquí está el error que obtengo. Lo único que hice fue descargar bootstrap del personalizador del sitio y reemplazar los archivos anteriores (aunque los archivos de fuente tenían nombres diferentes). Ahora no están funcionando ... También he probado varios navegadores, Firefox, Chrome, es decir, lo mismo ... i.imgur.com/2f474kX.jpg
scooterlord

2
Acabo de descargar la última versión de hoy y los glifos no se muestran si uso el archivo CSS minimizado. Si uso el bootstrap.css 'normal', todo funciona bien.
Antonio Sesto

1
Hasta el 23 de junio de 2015, incluir la última versión v3.3.5 maxcdn tiene ningún error

1
Descubrí que estaba usando los glifos sobre un fondo blanco y esperaba que aparecieran. Usando <i style = "color: black" class = "glyphicon glyphicon-new-window"> </i> lo solucionó.
Vijay Vepakomma

Respuestas:


478

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 fuentes se cargaban bien según Chrome, pero los íconos no se mostraban correctamente. Estoy respondiendo esto para que, con suerte, ayude a otros.

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


Ahorraste muchas horas de dolor. Ya había puesto una hora de dolor, pero luego pensé en buscar aquí.
Christina

66
el intercambio de los archivos de fuentes por los incluidos en bootstrap-3.0.0 de la página de inicio de getbootstrap.com funciona. ¡gracias por el consejo!
Michal Kopec

11
¡Respuesta correcta! ¡Los archivos de fuentes del personalizador están dañados!
Charles Ingalls

2
Quería agregar mi respuesta "yo también" y decir que después de perder un par de horas de esfuerzo, y casi furioso por dejar mi carrera, encontré esta respuesta y ahora tengo glifos trabajando nuevamente. ¡¡Gracias!!
dohpaz42

2
No puedo esperar a ser parte de todas las personas que tuvieron éxito, pero en este momento a pesar de haber probado casi todas las soluciones y respuestas de la Pila, todavía no puedo ver los íconos. Incluso intenté iniciar una aplicación MVC 5 completamente nueva y usar Nuget para instalar la última versión de bootstrap 3.3.7 que instala todas las carpetas correctamente y nada muestra un 404 en la herramienta de depuración del navegador ni nada que me diga que las fuentes no están cargadas y Puedo decirte que el código para el lapso es perfecto, entonces, ¿dónde está mi problema? Honestamente no lo se. Probé todos los navegadores y ninguno muestra los íconos
Marc Roussel

235

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


El archivo de fuente no se está cargando correctamente. Compruebe 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 mime. Las herramientas de desarrollo de Chrome muestran las fuentes descargadas en la pestaña de red:

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


55
y que los tipos mime están registrados correctamente.
Daniel A. White

44
... aunque los archivos deberían estar en su lugar cuando descargué el archivo bootstrap.zip, aún lo verifiqué dos veces y todo está en su lugar. ¿Cómo verifico el registro de mimetypes (=?)
scooterlord

1
@ user2261073 el archivo .eot no debe cargarse, a menos que esté utilizando Internet Explorer.
user247702

46
Parece que encontré el problema. El personalizador de bootstrap parece estar enviando fuentes de diferentes tamaños que las que están dentro del paquete de bootstrap completo que viene con los ejemplos. Reemplacé los archivos y todo está funcionando bien ahora. ¿Es muy probable que sea un error en el personalizador de bootstrap? Quién sabe. ¿Puedo informar esto en alguna parte para que puedan investigarlo?
scooterlord

2
@ user2261073 Puede informarlo sobre el proyecto GitHub. Parece que ya hay un informe de error activo: github.com/twbs/bootstrap/issues/10008
user247702

78

En mi caso, estaba obteniendo un 404 para glyphicons-halflings-regular.woff , y glyphicons no visibles en navegadores móviles.

Parece que hay algo de confusión sobre el tipo MIME para woff, más de un tipo MIME 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: la última versión de Bootstrap en este momento (3.3.5) usa fuentes .woff2 con el mismo resultado inicial que .woff, el W3C todavía define la especificación pero en este momento el tipo MIME parece ser:

application/font-woff2

17
Esto me señaló en la dirección buena, pero también me dio otra advertencia en Chrome ... El tipo MIME debe ser de hecho: application/x-font-woffa continuación, Firefox y Chrome fueron finalmente a la vez feliz :)
ghiscoding

Gracias, ese fue el verdadero problema para mí. Todo funcionaba bien localmente, pero una vez publicado en Azure, el tipo .woff era el único que causaba problemas.
Kevin Cloet

56

-Si siguió la respuesta mejor calificada y todavía no funciona :

La Fontcarpeta DEBE estar en el mismo nivel que su carpeta CSS. Arreglar el camino bootstrap.css no funcionará.

Bootstrap.csstiene que navegar a la Fontscarpeta 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');
}

3
Creo que el 70% de Glyphicon no funciona en este caso, excelente respuesta, a menudo pongo archivos css Bootstrap en css / bootstrap. Simplemente
muévalos

1
Bueno, el camino para mí se ve EXACTAMENTE según lo prescrito por usted, pero todavía no funciona para mí. Tampoco descarga el paquete fuente y reemplaza los archivos de fuente. Debo agregar que algunos glificones se cargan mientras que otros no. ¿Puede usted ayudar?
Darth Coder

¿Dónde está la carpeta de fuentes que no tengo?
Swift

Además, la csscarpeta debe ser una subcarpeta de la carpeta que contiene su archivo HTML. Entonces, como mínimo, debe tener 1) su archivo HTML, 2) un archivo css en una subcarpeta llamada cssy 3) los archivos de fuente en una subcarpeta llamada fonts.
Kivi Shapiro

Esto no hace ninguna diferencia al cargar desde CDN; solo cuando se carga localmente. Agregar un enlace para //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.cssresolverlo por mí.
James Wilkins

48

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

Puedes hacer esto en HTML:

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

O CSS:

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

Crédito a edsiofi de este hilo: Bootstrap 3 Glyphicons CDN


24

En caso de que alguien más termine aquí y use Bootstrap> = v4.0: elimina el soporte de glifos

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

Soltó la fuente del icono Glyphicons. Si necesita iconos, algunas opciones son:

la versión aguas arriba de Glyphicons

Octicones

Font Awesome

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

Si desea utilizar glificones, debe descargarlo por separado.

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

<i class="fas fa-chess"></i>

21

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

El problema radicaba en el hecho de que los archivos de fuentes de glifos descargados de la herramienta de personalización de bootstrap no eran los mismos que los que se descargan de la redirección que se encuentra en la página de inicio de bootstrap. Los que funcionan 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 de personalización incorrectos debe sobrescribir las fuentes del enlace anterior.


El problema del personalizador se solucionó hace mucho tiempo. Ya no es un problema en Bootstrap actual.
cvrebert

1
Hoy en día, es probable que estén corriendo en cuestiones icono de ubicación de la fuente en su lugar, a pesar de que la forma en que el icono de rutas de las fuentes de trabajo se documenta ...
cvrebert

Hay ciertas cosas que debe verificar para este problema. - Comprobar esta tipos MIME en IIS para su sitio .. Debe estar allí para uno de los aspectos mencionados anteriormente ... - application/vnd.ms-fontobject- .eot - application/x-font-woff- .woff - application/x-font-ttf- .ttf - image/svg+xml- .svg
Pedram

Mis glifos funcionan en todos los navegadores, excepto IE. IE los muestra en la primera carga: presione F5 y luego ya no se muestra. El DOM es correcto, el CSS aplicado es correcto. No puedo encontrar una solución. Ideas?
Skychan

1
Puedo marcar / desmarcar el "contenido:" \ e080 "" CSS que establece el contenido en un carácter en particular. Cuando hago eso, el tamaño del lapso cambia físicamente de algo a nada y viceversa. Por lo tanto, realmente se siente como un error de IE: no poder dibujar el personaje.
Skychan

18

Websites Azure faltan woff configuración MIME. Debe agregar la siguiente entrada en web.config

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 

woff, woff2 and ttfextensiones?
Kiquenet

16

Como @Stijn describió, la ubicación predeterminada en Bootstrap.csses 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');
}

1
Si está utilizando MENOS, puede anularlo en su archivo menor y cambiar las URL para que coincidan con las rutas relativas de su archivo CSS gen'd o rootearlas.
Chris Searles

Esto ya no debería ser un problema con la última versión de bootstrap. ¡Actualizar!
dball

11

Puede agregar esta línea de código y listo.

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Gracias.


Faltan muchos de los íconos más nuevos agregados en versiones posteriores de v3.
James Wilkins

Respuesta perfecta, para mí de todos modos.
thonnor

8

IIS no servirá los .woffarchivos de forma predeterminada, por lo que en IIS deberá agregar una <mimeMap>entrada a su web.configarchivo;

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        </staticContent>
    </system.webServer>
</configuration>

Esto se escala mucho mejor en lugar de tener que recordar configurar esto para cada máquina IIS. Buena mención
Matty Bear

Debe actualizar su mimetype para que sea "application / font-woff" según los estándares actuales: stackoverflow.com/a/5142316/2267817
Siempre aprendiendo el

application / font-woff vs application / x-woff ?
Kiquenet

7

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

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

Esta es la respuesta correcta. Una persona puede encontrar la carpeta correcta para colocar estos archivos, utilizando el detective de enlaces de Xenu: home.snafu.de/tilman/xenulink.html
Nav

2
Sin embargo, hay personas que tienen todos estos archivos en la carpeta de fuentes, pero siguen recibiendo este error si el tipo mime woff no está registrado en IIS.
Stack0verflow

Se requiere el directorio de fuentes? Solo tengo bootstrap.css y bootstrap.js
Kiquenet

7

Modifiqué mi archivo menos variables. Modifiqué la variable

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

el original era

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

Estaba causando un problema


2
Para bootstrap-sass 3.2.0.1 gema parece necesitar $icon-font-path: "/assets/bootstrap/".
Joshua Muheim

Definitivamente la forma de trabajar CON bootstrap y no en contra.
el Hampster

6

Esto se debe a una codificación incorrecta en bootstrap.css y bootstrap.min.css. Cuando descarga Bootstrap 3.0 desde el 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á ...

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


6

Esta fue la razón, por qué los íconos no aparecieron para mí:

* {
    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.


¡Gracias! Después de rascarme la cabeza durante más de 4 horas y probar muchas cosas diferentes, recordé que agregué una fuente en "span" con importante. Se eliminó y todo volvió a la normalidad ..
Ali Haider

5

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

<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>

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

<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>

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

<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>


5

Este es un rodaje muy largo, pero fue mi caso y ya no está aquí.

Si está compilando Twitter Bootstrap de SASS usando gulp-sasso grunt-sassie.node-sass. Asegúrese de que sus módulos de nodo estén actualizados, especialmente si está trabajando en un proyecto bastante antiguo.

Resulta que, desde hace algún tiempo, la directiva SASS @at-rootse usa en la definición de los @font-faceglifos, consulte https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.sc .

El problema aquí es que es node-sassdecir. libsassno admita la @at-rootdirectiva si es demasiado antigua. Si este es el caso, obtendrá un @font-faceenvoltorio en el @at-rootque 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 iconos.


4

Nota: a continuación es probable que haya un nicho de escenario, 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 gema que está usando un motor Rails bootstrap-sass. Todo estuvo bien en el proyecto principal con la excepción de la resolución de la ruta de la fuente glyphicon.

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

Encontramos que $bootstrap-sass-asset-helpererafalse durante la resolución cuando esperábamos que fuera cierto, por lo que el camino era diferente.

Hicimos $bootstrap-sass-asset-helperque se inicializara en la gema del motor haciendo:

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

por ejemplo, esto causó que el camino se resolviera a:

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

Nuevamente, esto no debería ser necesario en cualquier proyecto de rieles normal bootstrap-sass, simplemente estamos reutilizando muchas vistas y esto funcionó para nosotros. Esperemos que esto pueda ayudar a alguien más.


4

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

Cambio de la ubicación de la fuente del icono Bootstrap supone que los archivos de la fuente del icono se ubicarán en el directorio ../fonts/, en relación con los archivos CSS compilados. Mover o renombrar esos archivos de fuentes significa actualizar el CSS de una de estas tres maneras: Cambie las variables @ icon-font-path y / o @ icon-font-name en los archivos fuente Less. Utilice la opción de URL relativas proporcionadas por el compilador Less. Cambie las rutas url () en el CSS compilado. 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 fuentes al directorio raíz


Me he olvidado de copiar la carpeta de fuentes, no sé dónde está, ¿alguien puede ayudarme?
Swift

3

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

El archivo estructurado se ve así:

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

Agregar mi propio archivo variables.less en la raíz del Contenido y hacer referencia a esto en styles.less resolvió el error 404.

Variables.less contiene:

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

Esto me ayudó a darme cuenta de que destruí mi variable de ruta ... al azar, pero sí, ¡gracias!
Taylor A. Leach

3

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

En mi caso, lo hice funcionar configurando la Acción de compilación para cada uno de los archivos de fuentes en 'Contenido' y configurándolos en 'Copiar siempre'.


3

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

<i class="glyphicon  glyphicon-arrow-down"></i>

si pudiera ayudar a alguien ...


Amigo, este también fue mi problema usando el CDN
Richard Barker

3

Asegúrese de no haber especificado demasiado la familia de fuentes, por ejemplo

*{font-family: Verdana;}

eliminará la fuente halflings de los elementos i.


3

Estaba teniendo el mismo problema en el que el navegador no pudo encontrar los archivos de fuentes, y mi problema se debió a exclusiones en mi archivo .htaccess que era archivos de la lista blanca que no deberían enviarse index.phppara su procesamiento. Como el archivo de fuente no se pudo cargar, los caracteres se reemplazaron con 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 se excluyen de la reescritura, pero los archivos de fuente son .woffy .woff2archivos, 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 woffy woff2a la lista blanca permite que se carguen los archivos de fuente, y los glifos deberían mostrarse correctamente.


2

Debe establecer por este orden:

<link rel="stylesheet" href="path/bootstrap.min.css"> 
<style type="text/css"> 
     @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'); } 
</style>

2

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


2
@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 el espacio de nombres y los glifos no funcionan, pero después de agregar la línea anterior en los glifos de código funcionan bien.


2

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.