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 Resposta
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>
-
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...– hugocsl22/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– hugocsl15/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
<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...