Come usare i glyphicons in bootstrap 3.0

Ho già utilizzato i glyphicons in bootstrap 2.3 ma ora ho aggiornato a bootstrap 3.0. Ora non riesco a utilizzare la proprietà icon.

In bootstrap 2.3, il tag sottostante funziona

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

In bootstrap 3.0, non funziona.

Le icone (glyphicons) sono ora contenute in un file CSS separati .. .

Il markup è cambiato in:

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

o

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

Ecco un utile elenco di modifiche per Bootstrap 3: http://bootply.com/bootstrap-3-migration-guide

Ecco qua:

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

Maggiori informazioni:

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

Btw. puoi usare questo strumento di conversione , questo aggiornerà anche il codice per le icone:

Se scarichi una distro bootstrap 3 personalizzata devi:

1. Scarica la distribuzione completa da https://github.com/twbs/bootstrap/archive/v3.0.0.zip
2. Decomprimere e caricare l'intera cartella chiamata fontsnella directory di bootstrap. Metti insieme alle altre cartelle "css, js".

Esempio prima:

\css
\js
index.html

Esempio dopo il caricamento:

\css
\fonts
\js
index.html

Se stai usando meno, e non sta caricando il carattere delle icone, devi controllare il percorso del carattere, andare al file variable.less e cambiare il percorso @ icon-font- path, che ha funzionato per me.

Bootstrap 3 richiede span tag non i

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

Includi i caratteri Copia tutti i file dei caratteri in una directory / fonts vicino al tuo CSS.

1. Includi il CSS o MENO Hai due opzioni per abilitare i caratteri nel tuo progetto: CSS vanilla o sorgente MENO. Per vanilla CSS, includi semplicemente il file CSS compilato dal / css nel repository.
2. Per MENO, copia i file .less da / less nella directory Bootstrap esistente. Quindi importalo in bootstrap.less tramite @import "bootstrap-glyphicons.less"; . Ricompila quando sei pronto.
3. Aggiungi alcune icone! Dopo aver aggiunto i caratteri e il CSS, puoi iniziare a utilizzare le icone. Per esempio,<span class="glyphicon glyphicon-ok"></span>

fonte

Se stai usando grunt per costruire la tua applicazione, è possibile che durante la compilazione i percorsi cambino. In questo caso è necessario modificare il file grunt in questo modo:

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
            }]
        }
    },

Scarica tutti i file da bootstrap e includi questo css

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

Questo potrebbe aiutare. Contiene molti esempi che saranno utili per la comprensione.

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