Bootstrap 3 Glyphicons no están funcionando

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 iconos no se mostraban correctamente. Estoy haciendo esto una respuesta por lo que espero que ayude a otros.

Algo estaba mal con los archivos de fuentes que descargué de la herramienta personalizador de Bootstrap 3. Para obtener las fuentes correctas, vaya a Bootstrap homepage y descargue el completo .archivo zip. Extraer 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 @user2261073 y la respuesta @Jeff's sobre un error en el personalizador. Es probablemente 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 indica Daniel, también podría ser un problema de tipo mime. Herramientas de desarrollo de Chrome mostrar fuentes descargadas en la pestaña de red:

En mi caso estaba recibiendo un 404 para glyphicons-halflings-regular.woff, y glificones no visibles en los 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: La última versión de Bootstrap en este momento (3.3.5) usos .fuentes woff2 con el mismo resultado inicial que .woff, el W3C todavía definiendo la especificación pero por el momento el tipo MIME parece ser:

application/font-woff2

-Si seguiste la respuesta más calificada y aún no funciona:

La carpeta Font DEBE estar en el mismo nivel que su carpeta CSS. La fijació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 Bootstrap para hacer todo por usted. Para hacer esto:

Puedes hacer esto en HTML:

<link href="//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

Faltan sitios web de Azure woff Configuración MIME. Debe agregar la siguiente entrada en la 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.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 server .woff archivos de forma predeterminada, por lo que en IIS necesitará agregar una entrada <mimeMap> a su archivo web.config;

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

En caso de que alguien terminó aquí y el uso de Bootstrap >= v4.0: glyphicon apoyo se quita

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

Se ha eliminado la fuente del icono de Glyphicons. Si necesita iconos, algunas opciones son:

La versión original de Glyphicons

Octicons

Fuente Impresionante

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

Si si desea usar glyphicons, debe descargarlo por separado.

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

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

Modifiqué mis variables less.menos archivo He modificado 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. Al descargar 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á ofc...

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

¿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

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

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

Y al migrar basado en la guía (.icon-* ---> .glyphicon .glyphicon-*):

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

Olvida agregar la clase icon (que contiene la referencia de fuente):

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

A continuación está lo que lo arregló para mí. Estaba recibiendo" mal URI " error usando en la consola Firebug. Los iconos se mostraban como números E###. Tuve que añadir una .archivo htaccess en mi directorio 'fonts'. <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> Posible duplicado de: Fuente descargable en firefox: mal URI o acceso entre sitios no permitido

Esta fue la razón, por la que los iconos no se muestran 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.

Esto es en gran medida una sesión larga, pero fue mi caso y ya que no está aquí ya.

Si está compilando Twitter Bootstrap desde SASS usando gulp-sass o grunt-sass ie. 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-root se utiliza en la definición de la @font-face en glyphicons, ver https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.scss.

El gotcha aquí es que node-sass ie. libsass no soporta la directiva @at-root si es demasiado antigua. Si este es el caso, obtendrá un @font-face envuelto en un @at-root con el 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 iconos.

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

En un proyecto rails, estamos reutilizando bastante a través de una gema que es un motor Rails usando bootstrap-sass. Todo estaba 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-helper fue false durante la resolución cuando esperábamos que fuera cierto, por lo que el camino era diferente.

Hicimos que el $bootstrap-sass-asset-helper 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

De nuevo, esto no debería ser necesario en cualquier proyecto normal de rails usando 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 no renderizadas.

Cambiar la ubicación de la fuente del icono Bootstrap asume que los archivos de fuente de iconos se ubicarán en el ..directorio / fonts/, relativo a los archivos CSS compilados. Mover o cambiar el nombre de esos archivos de fuentes significa actualizar el CSS de una de tres maneras: Cambie las variables @icon-font-path y/o @icon-font-name en los archivos source Less. Utilice la opción URL relativas proporcionada por el compilador Less. Cambiar las rutas url () en el compilado CSS. Utilice la opción que mejor se adapte a su configuración de desarrollo específica.

Aparte de eso, podría ser que te perdiste copiar la carpeta de fuentes al directorio raíz

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

El archivo estructurado se ve así:

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

Añadiendo mis propias variables.less archivo en la raíz del contenido y hacer referencia a esto en estilos.menos resuelto 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 la Acción de Compilación para cada uno de los archivos de fuente en 'Contenido' y configurándolos en 'Copiar siempre'.

Asegúrese de que no está especificando 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 las exclusiones en mi .archivo htaccess que estaba en la lista blanca archivos que no deberían enviarse a index.php para su procesamiento. Como el archivo de fuente no se podía 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 están excluidos de la reescritura, pero los archivos de fuentes son .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 fuentes, y los glificones deben 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');
}

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 así:

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

Si pudiera ayudar a alguien ...

Así es como se incluye el icono en bootstrap 3

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

Http://glyphicons.bootstrapcheatsheets.com /

Espero que eso 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 espacio de nombres y glyphicons que no funcionan, pero después de agregar la línea anterior en el código glyphicons que funciona bien.

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

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>