Como usar glificons no bootstrap 3.0

Já usei glificons no bootstrap 2.3, mas agora atualizei para o bootstrap 3.0. Agora, não consigo usar a propriedade icon.

No bootstrap 2.3, a tag abaixo está funcionando

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

No bootstrap 3.0, não está funcionando.

Os ícones (glyphicons) agora estão contidos em um arquivo CSS separado .. .

A marcação mudou para:

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

ou

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

Aqui está uma lista útil de alterações para Bootstrap 3: http://bootply.com/bootstrap-3-migration-guide

Ai está:

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

Mais Informações:

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

Btw. você pode usar esta ferramenta de conversão , isso também atualizará o código para os ícones:

Se você fizer o download de uma distro bootstrap 3 personalizada, você deve:

1. Baixe a distro completa em https://github.com/twbs/bootstrap/archive/v3.0.0.zip
2. Descompacte e faça upload de toda a pasta chamada fontspara o diretório de bootstrap. Coloque junto com as outras pastas "css, js".

Exemplo antes:

\css
\js
index.html

Exemplo após o upload:

\css
\fonts
\js
index.html

Se você estiver usando less e não estiver carregando a fonte dos ícones, você deve verificar o caminho da fonte, vá até o arquivo variable.less e altere o caminho @ icon-font- path, que funcionou para mim.

Bootstrap 3 requer tag span, não i

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

Incluir as fontes Copie todos os arquivos de fontes para um diretório / fonts próximo ao seu CSS.

1. Incluir CSS ou LESS Você tem duas opções para habilitar as fontes em seu projeto: vanilla CSS ou fonte LESS. Para o CSS vanilla, apenas inclua o arquivo CSS compilado do / css no repositório.
2. Para o LESS, copie os arquivos .less de / less para o diretório Bootstrap existente. Em seguida, importe-o para bootstrap.less via @import "bootstrap-glyphicons.less"; . Recompile quando estiver pronto.
3. Adicione alguns ícones! Depois de adicionar as fontes e CSS, você pode começar a usar os ícones. Por exemplo,<span class="glyphicon glyphicon-ok"></span>

fonte

Se você estiver usando o grunt para construir seu aplicativo, é possível que durante a construção os caminhos mudem. Neste caso, você precisa modificar seu arquivo grunt desta forma:

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

Baixe todos os arquivos do bootstrap e inclua este css

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

Isso pode ajudar. Ele contém muitos exemplos que serão úteis para a compreensão.

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