2

Os ícones do bootstrap não estão pegando em meu projeto. Pesquisei e vi que pode ser resolvido importando os arquivos de fonte do bootstrap. Qual a melhor forma de importar esses arquivos no body de uma página?

1
  • Jovem, posta o seu código ai inclusive com a <head>. Pode ser que o seu problema seja com a indexação dos arquivos etc. Pois com a resposta que dei abaixo deveria funcionar por ai também...
    – hugocsl
    22/03/2018 às 15:48

1 Resposta 1

2

Você pode importar direto no <head> do seu site dessa forma por exemplo

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

Ou se quiser pode chamar pelo <style> ou direto no .CSS dessa forma por exemplo:

<style>
    @font-face {
      font-family: 'Glyphicons Halflings';
      src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
      src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
           url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
           url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'),
           url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
           url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
    }
</style>

E onde quiser usar os ícones lembre de colocar font-family

Aqui tem o projeto do Glyphicon no GitHub https://github.com/ohpyupi/glyphicons-only-bootstrap

Exemplo de aplicação por CDN:

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

<p>Envelope: <span class="glyphicon glyphicon-envelope"></span></p> 

Exemplo de aplicação pelo @font-face no <style> ou .css:

@font-face {
      font-family: 'Glyphicons Halflings';
      src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
      src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
           url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
           url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'),
           url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
           url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font: normal normal 16px/1 'Glyphicons Halflings';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin-right: 4px;
}
/* Código do ícone */
.glyphicon-fire:before {
  content: '\e104';
}
<div class="glyphicon glyphicon-fire"> fogo na bomba</div>

7
  • Obrigado! Porém os icons ainda não estão funcionando, sabe o que pode ser? 22/03/2018 às 15:45
  • Edite sua resposta com o código completo que vai ficar mais fácil para te responder de forma mais precisa. Mas com o código acima deveria funcionar...
    – hugocsl
    22/03/2018 às 16:04
  • Também acho que deveria, estou usando semantic ui também, será que isso pode ocasionar erro? 22/03/2018 às 16:10
  • 1
    @FelipeRoque é isso mesmo, o BS4 não vem com Ícones nativamente, te sugiro usar o FontAwesome ou o Material Icons, ou então faz como nesse último exemplo da minha pergunta e usa o Glyphicon no BS4
    – hugocsl
    15/05/2020 às 18:22
  • 1
    @hugocsl eu linkei essas duas tags e funcionou : <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> 18/05/2020 às 16:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .