Cómo usar glyphicons en bootstrap 3.0

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 siguiente etiqueta está funcionando

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

En bootstrap 3.0, no funciona.

Los iconos (glyphicons) están contenidos en un archivo css separada .. .

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

Ahí tienes:

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

Más información:

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

Por cierto. puede utilizar esta herramienta de conversión , esto también actualizará el código de los iconos:

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

1. Descarga la distribución completa de https://github.com/twbs/bootstrap/archive/v3.0.0.zip
2. Descomprima y cargue toda la carpeta llamada fontsa su directorio bootstrap. Junta con las otras carpetas "css, js".

Ejemplo anterior:

\css
\js
index.html

Ejemplo después de la carga:

\css
\fonts
\js
index.html

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

Bootstrap 3 requiere etiqueta span, no i

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

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

1. Incluir CSS o MENOS Tiene dos opciones para habilitar las fuentes en su proyecto: CSS vainilla o fuente MENOS. Para CSS vanilla, simplemente incluya el archivo CSS compilado de / css en el repositorio.
2. Para MENOS, copie los archivos .less de / less en su directorio Bootstrap existente. Luego impórtelo a bootstrap.less a través de @import "bootstrap-glyphicons.less"; . Vuelva a compilar cuando esté listo.
3. ¡Agrega algunos iconos! Una vez que haya agregado las fuentes y CSS, puede comenzar a usar los íconos. Por ejemplo,<span class="glyphicon glyphicon-ok"></span>

fuente

Si está utilizando grunt para construir su aplicación, es posible que durante la construcción las rutas cambien. En este caso, debe modificar su archivo gruñido 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
            }]
        }
    },

Descargue todos los archivos de bootstrap y luego incluya este css

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

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

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