html5 - tutorial - como usar bootstrap

Cómo usar glyphicons en bootstrap 3.0

Question

Ya he usado glyphicons en bootstrap 2.3 pero ahora me he actualizado a bootstrap 3.0. Ahora, no puedo usar la propiedad del icono.

En bootstrap 2.3, la etiqueta siguiente funciona

<i class="icon-search"></i>

En bootstrap 3.0, no está funcionando.

Answer 1

Ahí tienes:

<i class="glyphicon glyphicon-search"></i>

Más información:

http://getbootstrap.com/components/#glyphicons

Por cierto. Puede usar esta herramienta de conversión , esto también actualizará el código de los íconos:

Answer 2

Bootstrap 3 requiere etiqueta span no i

<span class="glyphicon glyphicon-search"></span>`

Answer 3

Descarga todos los archivos de bootstrap y luego incluye este css

<style type="text/css">
        @font-face {
            font-family: ''Glyphicons Halflings'';
            src: url(''/fonts/glyphicons-halflings-regular.eot'');
        }
 </style>

Answer 4

Esto podría ayudar. Contiene muchos ejemplos que serán útiles para comprender.

http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp

Answer 5

Incluir las fuentes Copie todos los archivos de fuentes a un directorio / fonts cerca de su CSS.

1. Incluya el CSS o LESS. Tiene dos opciones para habilitar las fuentes en su proyecto: CSS vainilla o fuente LESS. Para CSS vainilla, simplemente incluya el archivo CSS compilado de / css en el repositorio.
2. Para LESS, copie los archivos .less de / less en su directorio existente de Bootstrap. Luego impórtelo en bootstrap.less a través de @import "bootstrap-glyphicons.less"; . Recompile cuando esté listo.
3. ¡Agregue algunos íconos! Después de agregar las fuentes y CSS, puede usar los íconos. Por ejemplo, <span class="glyphicon glyphicon-ok"></span>

fuente

Answer 6

Los íconos (glyphicons) ahora están contenidos en un archivo css separado ...

El marcado ha cambiado a:

<i class="glyphicon glyphicon-search"></i>

o

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

Aquí hay una lista útil de cambios para Bootstrap 3: http://bootply.com/bootstrap-3-migration-guide

Answer 7

Si descarga una distribución de bootstrap 3 personalizada, debe:

1. Descargue la distribución completa de https://github.com/twbs/bootstrap/archive/v3.0.0.zip
2. Descomprime y sube la carpeta completa llamada fonts a tu directorio bootstrap. Junte con las otras carpetas "css, js".

Ejemplo antes:

/css
/js
index.html

Ejemplo después de la carga:

/css
/fonts
/js
index.html

Answer 8

Si está utilizando ronco para construir su aplicación, es posible que durante la construcción las rutas cambien. En este caso, debe modificar su archivo grunt de esta manera:

copy: {
        main: {
            files: [{
                src: [''fonts/**''],
                dest: ''dist/fonts/'',
                filter: ''isFile'',
                expand: true,
                flatten: true
            }, {
                src: [''bower_components/font-awesome/fonts/**''],
                dest: ''dist/css/'',
                filter: ''isFile'',
                expand: true,
                flatten: false
            }]
        }
    },

Answer 9

Si usa menos, y no está cargando la fuente de los iconos, debe verificar la ruta de la fuente, vaya al archivo variable.less y cambie la ruta @ icon-font- path, que funcionó para mí.