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.
twitter-bootstrap-3
glyphicons
patinete
fonte
fonte
Respostas:
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.
fonte
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.
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:
fonte
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 :
Editar: Após testar o seguinte tipo MIME para woff, funciona em todos os navegadores atualmente:
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:
fonte
application/x-font-woff
em seguida, Firefox e Chrome foram finalmente ambos feliz :)-Se você seguiu a resposta com a classificação mais alta e ainda não está funcionando :
A
Font
pasta DEVE estar no mesmo nível da sua pasta CSS. Corrigir o caminhobootstrap.css
não funcionará.Bootstrap.css
precisa navegar para aFonts
pasta exatamente assim:fonte
css
pasta deve ser uma subpasta da pasta que contém seu arquivo HTML. Portanto, no mínimo, você deve ter 1) seu arquivo HTML, 2) um arquivo css em uma subpasta chamadacss
e 3) os arquivos de fonte em uma subpasta chamadafonts
.//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css
resolvê-lo para mim.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:
Ou CSS:
Crédito para edsiofi a partir desta discussão: Bootstrap 3 Glyphicons CDN
fonte
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:
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:
fonte
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:
Qualquer pessoa que tenha problemas com arquivos antigos do personalizador incorreto deve substituir as fontes no link acima.
fonte
application/vnd.ms-fontobject
- .eot -application/x-font-woff
- .woff -application/x-font-ttf
- .ttf -image/svg+xml
- .svgOs sites do Azure estão ausentes na configuração MIME do woff . Você deve adicionar a seguinte entrada no web.config
fonte
woff, woff2 and ttf
extensões?Como o @Stijn descreveu, o local padrão em
Bootstrap.css
está incorreto ao instalar este pacoteNuget
.Mude esta seção para ficar assim:
fonte
Você pode adicionar esta linha de código e pronto.
Obrigado.
fonte
O IIS não irá servidor de
.woff
arquivos por padrão, portanto, no IIS, você precisará adicionar uma<mimeMap>
entrada ao seuweb.config
arquivo;fonte
Você tem todos os arquivos abaixo no diretório de fontes
fonte
Modifiquei meu arquivo less variables.less modifiquei a variável
o original era
Estava causando um problema
fonte
$icon-font-path: "/assets/bootstrap/"
.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:
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.
fonte
Esta foi a razão pela qual os ícones não apareceram para mim:
Depois de remover essa parte da minha
CSS
, tudo funcionou como deveria. O importante foi o que causou problemas.fonte
Outro problema / solução pode estar com este código do Bootstrap 2.x:
e ao migrar com base no guia (
.icon-* ---> .glyphicon .glyphicon-*
):você esquece de adicionar a classe icon (contendo a referência da fonte):
fonte
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 permitidofonte
É 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-sass
ougrunt-sass
ie.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-face
glifos, consulte https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.scss .A pegadinha aqui é que
node-sass
isto é.libsass
não suporta a@at-root
diretiva se ela for muito antiga. Se for esse o caso, você será@font-face
envolvido em uma situação em@at-root
que 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.fonte
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.Descobrimos que
$bootstrap-sass-asset-helper
erafalse
durante a resolução que esperávamos que fosse verdade, então o caminho era diferente.Fazemos com que o
$bootstrap-sass-asset-helper
arquivo seja inicializado na gema do mecanismo, fazendo o seguinte:por exemplo, isso fez com que o caminho resolvesse:
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.fonte
Aqui está o que a documentação oficial diz sobre fontes que não são renderizadas.
Fora isso, você pode ter perdido a cópia da pasta de fontes no diretório raiz
fonte
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:
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:
fonte
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'.
fonte
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:
se isso pudesse ajudar alguém ...
fonte
Verifique se você não está especificando demais a família de fontes, por exemplo
removerá a fonte halflings dos elementos i.
fonte
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.php
para processamento. Como o arquivo de fonte não pôde ser carregado, os caracteres foram substituídos por BLOB.Como você pode ver, arquivos como imagens, rss e xml são excluídos da reescrita, mas os arquivos de fonte são
.woff
e.woff2
arquivos, portanto, eles também precisavam ser adicionados à lista de permissões.Adicionar
woff
ewoff2
à lista de permissões permite que os arquivos de fonte sejam carregados, e os glyphicons devem ser exibidos corretamente.fonte
Você deve definir por este pedido:
fonte
O que funcionou para mim foi substituir rotas de:
para
fonte
É assim que você inclui o ícone no bootstrap 3
http://glyphicons.bootstrapcheatsheets.com/
Espero que ajude.
fonte
Estou usando o bootstrap com namespace e glyphicons não funcionando, mas depois de adicionar a linha acima no código glyphicons funcionando bem.
fonte
Acabei de renomear a fonte do bootstrap.css usando Ctrl + c, Ctrl + ve funcionou.
fonte