twitter bootstrap 3 - glyphicon - Agrega todos los Glifos a Bootstrap 3
glyphicon size (4)
Sería más simple crear un .png personalizado y usar css normalmente.
¡Estoy excavando los Glyphicons en Bootstrap 3, pero parece que no están todos allí! Realmente me gustaría usar el ícono del edificio, pero Google no ha aparecido mucho.
¿Alguien sabe cómo agregar los Glyphicons faltantes a Bootstrap 3?
Puede crear su propia fuente personalizada utilizando el servicio gratuito: http://fontello.com/
Simplemente arrastre su glyphicons-halflings-regular.svg , elija los iconos que desea usar y descargue una fuente personalizada que contenga solo lo que necesita.
Fontello viene precargado con las siguientes bibliotecas:
- Fontelico
- Fuente impresionante
- Entypo
- Typicons
- Icónico
- Pictogramas modernos
- Meteocons
- Laboratorios MFG
- Maki
- Zocial
- Brandico
- Elusivo
- Linecons
- Símbolos web
También puede comprar la versión completa de Glyphicons por $ 59 en http://glyphicons.com/
Quería usar el Glyphicons Pro que había comprado, pero expandir las cosas actuales de halflings dentro de bootstrap era complicado. Así que creé un archivo css por separado para cada conjunto de íconos (completo, tipo de archivo y social) y copié la manera en que bootstrap los inicializa para poder usar una sintaxis similar. es decir
<span class="glyphpro glyphpro-download"></span>
<span class="glyphfiles glyphfiles-xml"></span>
<span class="glyphsocial glyphsocial-github"></span>
De esta forma puedes cargar solo los que quieras y cuando quieras y puedes usar la configuración de bootstrap de vanilla. Encuentra mis archivos aquí: Gist @ GitHub
Compré el conjunto completo de Gylphicons de http://glyphicons.com/ y quería usar todos los íconos disponibles. Si usa menos, es posible que deba hacer algo diferente. No lo sé.
Lo que he hecho y trabajado para mí después de probar varias cosas publicadas desde este hilo y otras en la red stackexchange es la siguiente:
(1) Respaldado mi archivo original bootstrap.css (he modificado el mío, además de una buena idea)
(2) Copié todos los archivos de fuentes regulares de glyphicons desde el directorio / web / html_css / fonts al directorio de fuentes donde están ubicados mis archivos de fuentes de arranque
(3) Comenzando en la línea 263ish de bootstrap.css haga el cambio para reflejarlo a continuación: (el suyo puede ser ligeramente diferente)
@font-face {
font-family: ''Glyphicons Halflings'';
src: url(''../fonts/glyphicons-regular.eot'');
src: url(''../fonts/glyphicons-regular.eot?#iefix'')
format(''embedded-opentype''), url(''../fonts/glyphicons-regular.woff'')
format(''woff''), url(''../fonts/glyphicons-regular.ttf'')
format(''truetype''), url(''../fonts/glyphicons-regular.svg#glyphiconsregular'') format(''svg'');
}
Deberían apuntar los url a los nuevos archivos de fuentes.
(4) Si quiere todos los glifos como lo hice, abra el archivo en el directorio / web / html_css / css / etiquetado glyphicons.css y copie todos los css para los glyhicons excepto la parte con @ font-face {} y el .glyphicon {} y pegarlo en un documento de texto vacío.
(5) Tendrá que hacer una búsqueda y reemplazar (lo hice de todos modos) por .glyphicons, tener en cuenta el (los) extremo (s) y reemplazarlos por .glyphicon no (s) en el extremo
(6) Luego abra el archivo bootstrap.css y comente o elimine todos los demás estilos .glyphicon-whatever y pegue sus nuevos estilos.
(7) Es posible que necesite eliminar la línea de la parte inferior del archivo que apunta al archivo bootstrap.css.map. No tuve que hacerlo, pero es posible que deba hacerlo.
(8) ¡Feliz Glifo!
NOTA : debe estar configurado para usar todos los glyhpicons ahora. Solo tenga en cuenta que algunos de los nombres de los glyphicons son diferentes a los del archivo de arranque original.
Creé un repositorio para el archivo css modificado: https://github.com/snowballrandom/bootstrap