Bootstrap 3 Glyphicons no funcionan

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.

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.

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:

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

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

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

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>

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.

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> 

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

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.

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>

¿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

Modifiqué mi archivo menos variables. Modifiqué la variable

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

el original era

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

Estaba causando un problema

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.

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.

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>

A continuación se muestra lo que me arregló. Recibía un error de "URI incorrecto" al usar la consola Firebug. Los íconos aparecían como números E ###. Tuve que agregar un archivo .htaccess en mi directorio de 'fuentes'. <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> Posible duplicado de: Fuente descargable en firefox: URI incorrecto o acceso a sitios cruzados no permitido

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.

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.

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

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

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'.

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

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

*{font-family: Verdana;}

eliminará la fuente halflings de los elementos i.

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.

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>

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

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

<span class="glyphicon glyphicon-bell"></span>

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

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