Bootstrap 3 Glyphicons no funcionan
Descargué bootstrap 3.0 y no consigo que funcionen los glifos. Recibo algún tipo de error "E003". ¿Alguna idea de por qué sucede esto? Probé tanto localmente 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 de esta página. Mis archivos de fuentes se cargaban bien según Chrome, pero los íconos no se mostraban correctamente. Estoy haciendo de esta una respuesta para que, con suerte, ayude a otros.
Algo andaba 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 desde 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. Probablemente sea la causa de tu problema.
El archivo de fuente no se carga correctamente. Compruebe si los archivos están en la 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 indicó Daniel, también podría tratarse de un problema de tipo mimo. Las herramientas de desarrollo de Chrome muestran las fuentes descargadas en la pestaña de red:
En mi caso, recibí un 404 para glyphicons-halflings-regular.woff y glifos no visibles en los navegadores móviles.
Parece que hay cierta confusión sobre el tipo MIME para woff, ya que diferentes navegadores aceptan más de un tipo MIME, 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 aún define la especificación pero por el momento el tipo MIME parece ser:
application/font-woff2
-Si seguiste la respuesta mejor calificada y aún 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');
}