css3 - poner - Bootstrap 3 no puede mostrar el glyphicon correctamente

imagen en navbar bootstrap 4

Question

Estoy migrando de bootstrap 2.3 a bootstrap 3 y todo funciona bien. Pero cuando traté de agregar algunos iconos, la fuente del icono no se muestra correctamente. Traté de ver aquí http://bootply.com/61521 y solo ''.glyphicon-envelope'' se mostraba correctamente. Otros han mostrado como ''E001'' y así sucesivamente.

¿Cómo puedo resolver este problema?

Para otros navegadores, los glifos se muestran correctamente, solo Firefox no pudo mostrarlos correctamente.

Answer 1

1. Intenta usar CDN
2. Intente configurar el encabezado HTTP de Access-Control-Allow-Origin

Answer 2

¿Elegiste la versión personalizada de Bootstrap? Existe el problema de que los archivos de fuentes incluidos en el paquete personalizado están rotos (consulte https://github.com/twbs/bootstrap/issues/9925 ). Si no desea utilizar el CDN, debe descargarlo manualmente y reemplazar sus propias fuentes con las descargadas:

https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot

Después de eso, intenta una fuerte recarga (CTRL + F5), espero que ayude.

Answer 3

Antes que nada, trato de instalar las fuentes de glyphicons por la vía "oficial", con el archivo zip. No pude hacerlo.

Esta es mi solución paso a paso:

1. Vaya a la página web de Bootstrap y luego a la sección "Componentes".
2. Abra la consola del navegador. En Chrome, Ctrl + Shift + C.
3. En la sección Recursos, dentro de Frames / getbootstrap.com / Fonts encontrará la fuente que realmente está ejecutando los glyphicons. Se recomienda usar el modo privado para evadir el caché.
4. Con la URL del archivo de fuente (haga clic derecho en el archivo que se muestra en la lista de recursos), cópielo en una nueva pestaña y presione ENTER. Esto descargará el archivo de fuente.
5. Copie otra vez la URL en una pestaña y cambie la extensión de la fuente a eot, ttf, svg o woff, como quiera.

Sin embargo, para un acceso más fácil, este es el enlace del archivo woff.

http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff

Answer 4

Aquí está la solución que funcionó para mí. Firefox tiene una política de origen de archivo que causa esto. Para solucionar, realice los siguientes pasos:

1. abrir sobre: ​​config en firefox
2. Busque la propiedad security.fileuri.strict_origin_policy y cámbiela de ''true'' a ''false''.
3. Voial! ¡tú eres bueno para irte!

Detalles: http://stuffandnonsense.co.uk/blog/about/firefoxs_file_uri_origin_policy_and_web_fonts

Solo verá este problema cuando acceda a un archivo usando el protocolo file: ///

Answer 5

Como otros han notado, hay algunos problemas con el personalizador.

Estaba teniendo problemas con los glyphicons que no mostraban ninguno, así como problemas con el diseño de la barra de navegación.

Utilicé la sugerencia y cargué las fuentes del zip completo / sobrescribí las de la versión personalizada y eso solucionó los problemas de los iconos.

También saqué el CDN CSS y javascript en lugar de mi copia local del CDN. Esto solucionó los problemas de mi barra de navegación.

Así que lo recomiendo hasta que te acostumbres a Bootstrap, no uses la versión personalizada, ya que podrías obtener resultados frustrantes y no deseados.

Answer 6

Esta es la documentación oficial que respalda las respuestas anteriores.

Cambio de la ubicación de la fuente del icono Bootstrap supone que los archivos de fuentes 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 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 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 este único error que los nuevos usuarios harían es, después de descargar el código de arranque del sitio web oficial. Tienden a omitir la carpeta de fuentes para copiar en su configuración de desarrollo. Entonces, la carpeta de fuentes faltantes también puede conducir a este problema

Answer 7

OK, mi problema no fue respondido por lo anterior. Tenía la carpeta de fuentes en la misma ubicación que las carpetas bootstrap css y js (por ejemplo, / theme / bootstrap3 / ..), pero estaba buscando la carpeta de fuentes en la raíz (por ejemplo / fonts / glyph ... .woff)

La solución para mí fue establecer la variable @ icon-font-path en la ruta relativa correcta:

Por ejemplo, @ icon-font-path: "fonts /";

Answer 8

Para mí, colocar mi carpeta de fuentes según la ubicación especificada en bootstrap.css resolvió el problema

En su mayoría, su carpeta de fuentes debe estar en el directorio padre del archivo bootstrap.css.

Me enfrenté a este problema e investigué muchas respuestas, si alguien todavía en 2015 enfrenta este problema, entonces es un problema de CSS o un error de ubicación para los archivos.

El error ya ha sido resuelto por bootstrap

Answer 9

Por si acaso :

Por ejemplo, simplemente intenté <span class="icones glyphicon glyphicon-pen"> y después de una hora me di cuenta de que este ícono no estaba incluido en el paquete de arranque. Mientras que el icono de enveloppe funcionaba bien ...

Espero que esto ayude

Answer 10

Terminé cambiando a Font-Awesome Icons. Son tan buenos, si no mejores, y todo lo que necesita hacer es vincular la fuente, días felices.

Answer 11

Tuve el mismo problema al usar un servidor Apache local. Esto resolvió mi problema:

http://www.ifusio.com/blog/firefox-issue-with-twitter-bootstrap-glyphicons

Para Amazon s3, necesita editar su configuración de CORS:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Answer 12

asegúrese de que el nombre de la carpeta que contiene el nombre de la fuente sea "fuentes" y no "fuente"

Answer 13

los íconos y el CSS ahora están separados de bootstrap. aquí hay un violín que proviene de otra respuesta de

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

http://jsfiddle.net/aQrPd/1/

Bootstrap 3 Glyphicons CDN

Answer 14

puedes usar etiquetas como esta:

<i class="fa fa-edit"></i>