twitter-bootstrap-3 - form - glyphicon bootstrap 4

Bootstrap 3 Glyphicons no funcionan (30)

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

¿Tienes todos los archivos de abajo en tu directorio de fuentes?

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

A continuación es lo que lo arregló para mí. Recibía el error "URI incorrecto" al utilizar la consola Firebug. Los iconos 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: no se permite el acceso URI incorrecto o entre sitios

A los sitios web de Azure les falta la configuración Moff de woff . Debe agregar la siguiente entrada en web.config

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

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

Aquí está lo que dice la documentación oficial con respecto a las fuentes que no se representan.

Al cambiar la ubicación de la fuente del icono, Bootstrap asume que los archivos de 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 formas: Cambie las variables @ icon-font-path y / o @ icon-font-name en los archivos de origen Less. Utilice la opción de URL relativa proporcionada por el compilador Less. Cambia las rutas url () en el CSS compilado. Utilice la opción que mejor se adapte a su configuración de desarrollo específica.

Aparte de eso, es posible que no haya copiado la carpeta de fuentes al directorio raíz.

Así es como se incluye el icono en bootstrap 3.

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

http://glyphicons.bootstrapcheatsheets.com/

Espero que ayude.

Asegúrate de no haber terminado de especificar la familia de fuentes, por ejemplo

*{font-family: Verdana;}

eliminará la fuente halflings de i elementos.

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

Cambie esta sección para verse 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''); }

Debes establecer por este orden:

Debes establecer por este orden:

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

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

Se eliminó la fuente del icono Glyphicons. Si necesitas íconos, algunas opciones son:
la versión anterior de Glyphicons
Octicons
Fuente impresionante

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

Si quieres usar glyphicons necesitas descargarlo por separado.

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

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

En mi caso obtuve un 404 para glyphicons-halflings-regular.woff , y glyphicons 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 ha sido aceptado por diferentes navegadores, pero el W3C dice :

application/font-woff

Edición: después de probar el siguiente tipo MIME para woff funciona en todos los navegadores actualmente:

application/x-font-woff

Edición: la última versión de Bootstrap en este momento (3.3.5) usa fuentes .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

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

Si está compilando Twitter Bootstrap desde SASS usando gulp-sass o grunt-sass ie. node-sass . Asegúrese de que sus módulos de nodos 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 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 con. El resultado de esto es que no se descargará ninguna fuente y probablemente verá basura en lugar de iconos.

Esta fue la razón por la que los iconos no se mostraron para mí:

* { arial, sans-serif !important; }

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

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

El problema radicaba en el hecho de que los archivos de fuentes de glyphicon 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 principal 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 del personalizador defectuoso debe sobrescribir las fuentes del enlace anterior.

Estaba teniendo el mismo problema donde el navegador no podía encontrar los archivos de fuentes, y mi problema se debía a las exclusiones en mi archivo .htaccess que eran archivos de listas blancas que no deberían enviarse a index.php para 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 fuentes 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 que se carguen los archivos de fuentes, y los glyphicons deberían mostrarse correctamente.

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

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

IIS no .woff archivos .woff forma predeterminada, por lo que en IIS deberá 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>

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

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

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

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

el original era

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

Estaba causando un problema

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

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

Según lo indicado por Daniel, también podría ser un problema de mimetype. Las herramientas de desarrollo de Chrome muestran las fuentes descargadas en la pestaña de red:

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 bastante a través de una gema que es un motor de Rails que utiliza bootstrap-sass . Todo estuvo bien en el proyecto principal, con la excepción de la resolución de la ruta de la fuente del glifón.

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

Encontramos 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 $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 la ruta se resolviera para:

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

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

Otro problema / solución puede 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 guide ( .icon-* ---> .glyphicon .glyphicon-* ):

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

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

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

Si las otras soluciones no funcionan, es posible que desee 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="//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 por este hilo: Bootstrap 3 Glyphicons CDN

Tenía 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 estaban cargando bien de acuerdo con Chrome, pero los iconos no se mostraban correctamente. Estoy haciendo de esto una respuesta, así que espero que ayude a otros.

Algo estaba mal con los archivos de fuentes 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.

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

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

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

Tuve este problema y fue causado por el archivo variables.less. Al anularlo para establecer el valor de la ruta de la fuente del icono se 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 de Contenido y hacer referencia a esto en styles.less resolvió el error 404.

Variables.less contiene:

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

-Si sigues la respuesta más alta y aún no funciona :

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

Bootstrap.css tiene que navegar a la carpeta de Fonts exactamente como esto:

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