O Bootstrap 3 Glyphicons não está funcionando

Fiz o download do bootstrap 3.0 e não consigo fazer com que os glyphicons funcionem. Eu recebo algum tipo de erro "E003". Alguma idéia de por que isso está acontecendo? Tentei tanto localmente quanto online e ainda tenho o mesmo problema.

Eu estava com o mesmo problema e não consegui encontrar nenhuma informação sobre ele, exceto nos comentários ocultos nesta página. Meus arquivos de fonte estavam carregando muito bem, de acordo com o Chrome, mas os ícones não estavam sendo exibidos corretamente. Estou fazendo disso uma resposta, por isso espero ajudar os outros.

Ocorreu um problema com os arquivos de fonte que baixei da ferramenta de personalização do Bootstrap 3. Para obter as fontes corretas, vá para o página inicial Bootstrap e faça o download do arquivo .zip completo. Extraia os quatro arquivos de fonte de lá para o diretório de fontes e tudo deve funcionar.

Nota para os leitores: leia o comentário de @ user2261073 e a resposta de Jeff sobre um bug no personalizador. É provavelmente a causa do seu problema.

O arquivo da fonte não está sendo carregado corretamente. Verifique se os arquivos estão no local esperado.

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Conforme indicado por Daniel, também pode ser um problema de tipo MIME. As ferramentas de desenvolvimento do Chrome mostram as fontes baixadas na guia rede:

No meu caso, eu estava recebendo um 404 para glyphicons-halflings-regular.woff e glyphicons não visíveis em navegadores móveis.

Parece que há alguma confusão sobre o tipo MIME para woff, mais de um tipo MIME sendo aceito por diferentes navegadores, mas o W3C diz :

application/font-woff

Editar: Após testar o seguinte tipo MIME para woff, funciona em todos os navegadores atualmente:

application/x-font-woff

Edit: A versão mais recente do Bootstrap neste momento (3.3.5) usa fontes .woff2 com o mesmo resultado inicial que .woff, o W3C ainda está definindo a especificação, mas no momento o tipo MIME parece ser:

application/font-woff2

-Se você seguiu a resposta com a classificação mais alta e ainda não está funcionando :

A Fontpasta DEVE estar no mesmo nível da sua pasta CSS. Corrigir o caminho bootstrap.css não funcionará.

Bootstrap.cssprecisa navegar para a Fontspasta exatamente assim:

@font-face {
    font-family: 'Glyphicons Halflings';

    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Se as outras soluções não estiverem funcionando, convém importar o Glyphicons de uma fonte externa, em vez de confiar no Bootstrap para fazer tudo por você. Para fazer isso:

Você pode fazer isso em HTML:

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Ou CSS:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css")

Crédito para edsiofi a partir desta discussão: Bootstrap 3 Glyphicons CDN

Caso outra pessoa tenha terminado aqui e usando o Bootstrap> = v4.0: o suporte ao glyphicon foi descartado

A parte relevante das notas de versão:

A fonte do ícone Glyphicons caiu. Se você precisar de ícones, algumas opções são:

a versão upstream do Glyphicons

Octicons

Font Awesome

Fonte: https://v4-alpha.getbootstrap.com/migration/#components

Se você quiser usar glyphicons, precisará baixá-lo separadamente.

Eu pessoalmente tentei o Font Awesome e é muito bom. A adição de ícones é semelhante à maneira glypicon:

<i class="fas fa-chess"></i>

Eu estava examinando essa minha antiga pergunta e, como o que deveria ser a resposta correta até agora, foi dada por mim nos comentários, acho que também mereço o crédito por isso.

O problema estava no fato de que os arquivos de fonte glyphicon baixados da ferramenta de personalização do bootstrap não eram os mesmos que os baixados do redirecionamento encontrado na página inicial do bootstrap. Os que estão funcionando como deveriam são os que podem ser baixados no seguinte link:

http://getbootstrap.com/getting-started/#download

Qualquer pessoa que tenha problemas com arquivos antigos do personalizador incorreto deve substituir as fontes no link acima.

Os sites do Azure estão ausentes na configuração MIME do woff . Você deve adicionar a seguinte entrada no web.config

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 

Como o @Stijn descreveu, o local padrão em Bootstrap.cssestá incorreto ao instalar este pacote Nuget.

Mude esta seção para ficar assim:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('Content/fonts/glyphicons-halflings-regular.eot');
  src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Você pode adicionar esta linha de código e pronto.

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Obrigado.

O IIS não irá servidor de .woffarquivos por padrão, portanto, no IIS, você precisará adicionar uma <mimeMap>entrada ao seu web.configarquivo;

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        </staticContent>
    </system.webServer>
</configuration>

Você tem todos os arquivos abaixo no diretório de fontes

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

Modifiquei meu arquivo less variables.less modifiquei a variável

@icon-font-path:          "fonts/";    

o original era

@icon-font-path:          "../fonts/"; 

Estava causando um problema

Isso ocorre devido à codificação incorreta no bootstrap.css e bootstrap.min.css. Quando você baixa o Bootstrap 3.0 do Customizer, o seguinte código está ausente:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Como este é o código principal para usar Glyphicons, ele não funcionará ofc ...

Faça o download dos arquivos css do pacote completo e esse código será implementado.

Esta foi a razão pela qual os ícones não apareceram para mim:

* {
    arial, sans-serif !important;
}

Depois de remover essa parte da minha CSS, tudo funcionou como deveria. O importante foi o que causou problemas.

Outro problema / solução pode estar com este código do Bootstrap 2.x:

<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>

e ao migrar com base no guia ( .icon-* ---> .glyphicon .glyphicon-*):

<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>

você esquece de adicionar a classe icon (contendo a referência da fonte):

<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>

Abaixo está o que foi corrigido para mim. Eu estava recebendo o erro "URI ruim" usando o console do Firebug. Os ícones estavam aparecendo como números E ###. Eu tive que adicionar um arquivo .htaccess no meu diretório 'fontes'. <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> Possível duplicata de: Fonte para download no firefox: URI incorreto ou acesso entre sites não permitido

É uma filmagem muito longa, mas foi o meu caso e uma vez que ainda não está aqui.

Se você está compilando o Twitter Bootstrap do SASS usando gulp-sassou grunt-sassie. node-sass. Verifique se os módulos do nó estão atualizados, especialmente se você estiver trabalhando em um projeto bastante antigo.

Acontece que, há algum tempo, a diretiva SASS @at-rooté usada na definição dos @font-faceglifos, consulte https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.scss .

A pegadinha aqui é que node-sassisto é. libsassnão suporta a @at-rootdiretiva se ela for muito antiga. Se for esse o caso, você será @font-faceenvolvido em uma situação em @at-rootque o navegador não tem idéia do que fazer. O resultado disso é que nenhuma fonte será baixada e você provavelmente verá lixo em vez de ícones.

Nota: abaixo é provavelmente um cenário de nicho, mas eu queria compartilhá-lo, caso outra pessoa possa achar útil.

Em um projeto rails, estamos reutilizando bastante através de uma gema que é um mecanismo Rails usando bootstrap-sass. Tudo estava bem no projeto principal, com exceção da resolução do caminho da fonte glyphicon.

GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found) 

Descobrimos que $bootstrap-sass-asset-helpererafalse durante a resolução que esperávamos que fosse verdade, então o caminho era diferente.

Fazemos com que o $bootstrap-sass-asset-helperarquivo seja inicializado na gema do mecanismo, fazendo o seguinte:

// explicit sprockets import to get glyphicon font paths correct
@import 'bootstrap-sprockets';
@import "bootstrap/variables";

por exemplo, isso fez com que o caminho resolvesse:

/assets/bootstrap/glyphicons-halflings-regular.woff

Novamente, isso não deve ser necessário em nenhum projeto normal de rails bootstrap-sass, apenas reutilizamos muitas visualizações e isso funcionou para nós. Espero que isso possa ajudar alguém.

Aqui está o que a documentação oficial diz sobre fontes que não são renderizadas.

Alterando o local da fonte do ícone O Bootstrap assume que os arquivos de fonte do ícone estarão localizados no diretório ../fonts/, em relação aos arquivos CSS compilados. Mover ou renomear esses arquivos de fonte significa atualizar o CSS de uma de três maneiras: Altere as variáveis ​​@ icon-font-path e / ou @ icon-font-name nos arquivos de origem Less. Utilize a opção de URLs relativa fornecida pelo compilador Menos. Mude os caminhos url () no CSS compilado. Use qualquer opção que melhor se adapte à sua configuração de desenvolvimento específica.

Fora isso, você pode ter perdido a cópia da pasta de fontes no diretório raiz

Eu tive esse problema e foi causado pelo arquivo variables.less. Substituí-lo para definir o valor de icon-font-path resolveu o problema.

O arquivo estruturado é assim:

\Content
        \Bootstrap
        \Fonts
 styles.less
 variables.less

Adicionar meu próprio arquivo variables.less na raiz do Content e referenciá-lo em styles.less resolveu o erro 404.

Variables.less contém:

@icon-font-path:          "fonts/";

Eu peguei o Bootstrap do NuGet. Quando publiquei meu site, os glifos não funcionaram.

No meu caso, consegui fazê-lo definindo a Ação de Compilação para cada um dos arquivos de fonte como 'Conteúdo' e defina-os como 'Copiar sempre'.

Eu tinha um código de largura da caixa \ e094 para glyphicon-arrow-down, na verdade eu resolvi o problema adicionando glyphicon na classe css assim:

<i class="glyphicon  glyphicon-arrow-down"></i>

se isso pudesse ajudar alguém ...

Verifique se você não está especificando demais a família de fontes, por exemplo

*{font-family: Verdana;}

removerá a fonte halflings dos elementos i.

Eu estava com o mesmo problema em que o navegador não conseguia encontrar os arquivos de fonte e meu problema ocorreu devido a exclusões no meu arquivo .htaccess que eram arquivos da lista de permissões que não deveriam ser enviados index.phppara processamento. Como o arquivo de fonte não pôde ser carregado, os caracteres foram substituídos por BLOB.

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

Como você pode ver, arquivos como imagens, rss e xml são excluídos da reescrita, mas os arquivos de fonte são .woffe .woff2arquivos, portanto, eles também precisavam ser adicionados à lista de permissões.

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

Adicionar woffe woff2à lista de permissões permite que os arquivos de fonte sejam carregados, e os glyphicons devem ser exibidos corretamente.

Você deve definir por este pedido:

<link rel="stylesheet" href="path/bootstrap.min.css"> 
<style type="text/css"> 
     @font-face {   font-family: 'Glyphicons Halflings';   
     src: url('../fonts/glyphicons-halflings-regular.eot');   
     src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/glyphicons-halflings-regular.woff') format('woff'),  
     url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
     url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } 
</style>

O que funcionou para mim foi substituir rotas de:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

para

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('/assets/glyphicons-halflings-regular.eot');
  src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'),
  url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
  url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

É assim que você inclui o ícone no bootstrap 3

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

http://glyphicons.bootstrapcheatsheets.com/

Espero que ajude.

@font-face {
     font-family: 'Glyphicons Halflings';
      src: url('../fonts/glyphicons-halflings-regular.eot');
      src: url('../fonts/glyphicons-halflings-regular.eot?#iefix')         format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}

Estou usando o bootstrap com namespace e glyphicons não funcionando, mas depois de adicionar a linha acima no código glyphicons funcionando bem.

Acabei de renomear a fonte do bootstrap.css usando Ctrl + c, Ctrl + ve funcionou.