Como usar glificons no bootstrap 3.0

86

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.

html css twitter-bootstrap-3

— Shivang Gupta
fonte

1

Olá a todos, Fiz o mesmo e acompanhei a estrutura, mas não obtive o glifício correto ... Uma imagem do tipo 0101 não identificada é mostrada em vez do glifício

— Shivang Gupta

Obrigado, na verdade, o problema era que eu estava usando o arquivo .less diretamente, sem convertê-lo para css ... oops

— Shivang Gupta

Para a versão 3.0.0, ele quebra por padrões. Tentei alguns solutions, ninguém trabalha para mim.

— Andrew_1510

Estou vendo esse problema ao usar o arquivo .less diretamente usando less.js. É claro que, nessa situação, eu também gostaria de vê-lo trabalho

— Marc

108

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

— Zim
fonte

5

Olá a todos, Fiz o mesmo e acompanhei a estrutura, mas não obtive o glifício correto ... Uma imagem do tipo 0101 não identificada é mostrada em vez do glifício

— Shivang Gupta

Você pode mostrar seu código que inclui o CSS bootstrap e glificons? Você está vendo algum erro no console do navegador?

— Zim

Apenas certifique-se de incluir o glyphicons.css corretamente. Deve funcionar bem: bootply.com/61521

— Zim

Eu adicionei isso corretamente ... a estrutura é css / fonts / ...., css / less / ..., css / bootstrap.min.css e em bootstrap.min.css incluí @import "less / bootstrap-glyphicons.less ";

— Shivang Gupta

17

O link do arquivo css separado parece estar quebrado.

— Trevi Awater

29

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:

— TheNiceGuy
fonte

1

A migração de Bootply economiza muito tempo convertendo código para TWB 3. Muito útil, @Michael / Buhake-Sindi.

— Fernando Kosh

19

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

Baixe a distro completa em https://github.com/twbs/bootstrap/archive/v3.0.0.zip
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

— Emiliano Díaz
fonte

Isso funciona perfeitamente bem (janeiro de 2016). Obrigado por compartilhar!

— Devner

6

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.

— Alejandro
fonte

4

Bootstrap 3 requer tag span, não i

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

— stranger4js
fonte

3

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

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.
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.
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

— Mark Anthony Uy
fonte

1

Olá a todos, Fiz o mesmo e acompanhei a estrutura, mas não obtive o glifício correto ... Uma imagem do tipo 0101 não identificada é mostrada em vez do glifício

— Shivang Gupta

3

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

— Anke Wenz
fonte

2

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>

— User_3535
fonte

0

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

— Mushu
fonte

Observe que as respostas somente com link são desencorajadas, as respostas do SO devem ser o ponto final de uma busca por uma solução (em vez de outra parada de referências, que tendem a ficar obsoletas com o tempo). Considere adicionar uma sinopse independente aqui, mantendo o link como referência.

— kleopatra