Temos um projeto que usa glyphicons intensivamente. O Bootstrap v4 descarta completamente a fonte glyphicon.
Existe um equivalente para os ícones enviados com o Bootstrap V4?
Temos um projeto que usa glyphicons intensivamente. O Bootstrap v4 descarta completamente a fonte glyphicon.
Existe um equivalente para os ícones enviados com o Bootstrap V4?
Respostas:
Você pode usar o Font Awesome e o Github Octicons como uma alternativa gratuita para o Glyphicons.
O Bootstrap 4 também mudou de Less para Sass, para que você possa integrar o Sass da fonte (SCSS) no processo de criação, para criar um único arquivo CSS para seus projetos.
Consulte também https://getbootstrap.com/docs/4.1/getting-started/build-tools/ para descobrir como configurar suas ferramentas:
/bootstrap
diretório raiz e execute npm install
para instalar nossas dependências locais listadas em package.json.gem install bundler
, finalmente, execute bundle install
. Isso instalará todas as dependências do Ruby, como Jekyll e plugins.Font Awesome
font-awesome/scss
pasta na sua pasta / bootstrapAbra seu SCSS /bootstrap/bootstrap.scss
e anote o seguinte código SCSS no final deste arquivo:
$fa-font-path: "../fonts";
@import "../font-awesome/scss/font-awesome.scss";
Observe que você também deve copiar o arquivo de fonte de ou font-awesome/fonts
para dist/fonts
qualquer outra pasta pública definida $fa-font-path
na etapa anterior
npm run dist
para recompilar seu código com Font-AwesomeOcticons do Github
octicons
pasta para sua /bootstrap
pastaAbra seu SCSS /bootstrap/bootstrap.scss
e anote o seguinte código SCSS no final deste arquivo:
$fa-font-path: "../fonts";
@import "../octicons/octicons/octicons.scss";
Observe que você também deve copiar o arquivo de fonte de ou font-awesome/fonts
para dist/fonts
qualquer outra pasta pública definida $fa-font-path
na etapa anterior
npm run dist
para recompilar seu código com o OcticonsGlyphicons
No site do Bootstrap, você pode ler:
Inclui mais de 250 glifos no formato de fonte do conjunto Glyphicon Halflings. Glyphicons Halflings normalmente não estão disponíveis gratuitamente, mas seu criador os disponibilizou para o Bootstrap gratuitamente. Como agradecimento, solicitamos apenas que você inclua um link para Glyphicons sempre que possível.
Pelo que entendi, você pode usar esses 250 glifos sem custo restrito ao Bootstrap, mas não limitado à versão 3 exclusiva. Então você pode usá-los também para o Bootstrap 4.
bootstrap/scss
pasta$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: '../fonts/';
@import "glyphicons";
npm run dist
para recompilar seu código com GlyphiconsObserve que o Bootstrap 4 requer o CSS Autoprefixer pós para compilar. Quando você estiver usando um compilador estático do Sass para compilar seu CSS, será necessário executar o Autoprefixer posteriormente.
Você pode descobrir mais sobre como mixar com o Bootstrap 4 SCSS aqui .
Você também pode usar o Bower para instalar as fontes acima. O uso do Bower Font Awesome instala seus arquivos e bower_components/components-font-awesome/
também observe que o Github Octicons define o octicons/octicons/octicons-.scss
arquivo principal enquanto você deve usá-lo octicons/octicons/sprockets-octicons.scss
.
Todas as opções acima irão compilar todo o seu código CSS, inclusive em um único arquivo, o que requer apenas uma solicitação HTTP. Como alternativa, você também pode carregar a fonte Font-Awesome da CDN, que também pode ser rápida em muitas situações. Ambas as fontes na CDN também incluem os arquivos de fonte (usando dados-uri, possivelmente não suportados por navegadores mais antigos). Portanto, considere qual solução melhor se adapta à sua situação, dependendo de outros navegadores para oferecer suporte.
Para o Font Awesome, cole o seguinte código na <head>
seção do HTML do seu site:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Tente também o gerador Yeoman para montar um aplicativo Web Bootstrap 4 front-end para testar o Bootstrap 4 com Font Awesome ou Github Octicons.
Migrar de Glyphicons para Font Awesome é bastante fácil.
Inclua uma referência ao Font Awesome (localmente ou use a CDN).
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Em seguida, execute uma pesquisa e substitua onde você a procura glyphicon glyphicon-
e substitua fa fa-
. A maioria dos nomes de classe CSS é a mesma. Alguns foram alterados, então você precisa corrigi-los manualmente.
fa fa-
é depreciado. O site deles diz agora fas fa-
e esta mensagem:The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
O arquivo glyphicons.less do Bootstrap 3 está disponível no GitHub. https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less
Ele precisa destas variáveis:
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
@icon-font-svg-id: "glyphicons_halflingsregular";
Em seguida, você pode converter o arquivo .less em um arquivo .css que você pode usar diretamente. Você pode fazer isso online no lesscss.org/less-preview/ . Aqui eu fiz isso por você , salve-o como glyphicons.css e inclua-o em seus arquivos HTML.
<link href="https://stackoverflow.com/Content/glyphicons.css" rel="stylesheet" />
Você também precisa das fontes Glyphicon que estão no pacote Bootstrap 3, coloque-as em um diretório / fonts /.
Agora você pode continuar usando Glyphicons com o Bootstrap 4, como de costume.
Se precisar apenas de classes glyphicon em CSS:
@font-face{font-family:'Glyphicons Halflings';src:url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot');src:url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff') format('woff'),url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;}
.glyphicon-asterisk:before{content:"\2a";}
.glyphicon-plus:before{content:"\2b";}
.glyphicon-euro:before{content:"\20ac";}
.glyphicon-minus:before{content:"\2212";}
.glyphicon-cloud:before{content:"\2601";}
.glyphicon-envelope:before{content:"\2709";}
.glyphicon-pencil:before{content:"\270f";}
.glyphicon-glass:before{content:"\e001";}
.glyphicon-music:before{content:"\e002";}
.glyphicon-search:before{content:"\e003";}
.glyphicon-heart:before{content:"\e005";}
.glyphicon-star:before{content:"\e006";}
.glyphicon-star-empty:before{content:"\e007";}
.glyphicon-user:before{content:"\e008";}
.glyphicon-film:before{content:"\e009";}
.glyphicon-th-large:before{content:"\e010";}
.glyphicon-th:before{content:"\e011";}
.glyphicon-th-list:before{content:"\e012";}
.glyphicon-ok:before{content:"\e013";}
.glyphicon-remove:before{content:"\e014";}
.glyphicon-zoom-in:before{content:"\e015";}
.glyphicon-zoom-out:before{content:"\e016";}
.glyphicon-off:before{content:"\e017";}
.glyphicon-signal:before{content:"\e018";}
.glyphicon-cog:before{content:"\e019";}
.glyphicon-trash:before{content:"\e020";}
.glyphicon-home:before{content:"\e021";}
.glyphicon-file:before{content:"\e022";}
.glyphicon-time:before{content:"\e023";}
.glyphicon-road:before{content:"\e024";}
.glyphicon-download-alt:before{content:"\e025";}
.glyphicon-download:before{content:"\e026";}
.glyphicon-upload:before{content:"\e027";}
.glyphicon-inbox:before{content:"\e028";}
.glyphicon-play-circle:before{content:"\e029";}
.glyphicon-repeat:before{content:"\e030";}
.glyphicon-refresh:before{content:"\e031";}
.glyphicon-list-alt:before{content:"\e032";}
.glyphicon-flag:before{content:"\e034";}
.glyphicon-headphones:before{content:"\e035";}
.glyphicon-volume-off:before{content:"\e036";}
.glyphicon-volume-down:before{content:"\e037";}
.glyphicon-volume-up:before{content:"\e038";}
.glyphicon-qrcode:before{content:"\e039";}
.glyphicon-barcode:before{content:"\e040";}
.glyphicon-tag:before{content:"\e041";}
.glyphicon-tags:before{content:"\e042";}
.glyphicon-book:before{content:"\e043";}
.glyphicon-print:before{content:"\e045";}
.glyphicon-font:before{content:"\e047";}
.glyphicon-bold:before{content:"\e048";}
.glyphicon-italic:before{content:"\e049";}
.glyphicon-text-height:before{content:"\e050";}
.glyphicon-text-width:before{content:"\e051";}
.glyphicon-align-left:before{content:"\e052";}
.glyphicon-align-center:before{content:"\e053";}
.glyphicon-align-right:before{content:"\e054";}
.glyphicon-align-justify:before{content:"\e055";}
.glyphicon-list:before{content:"\e056";}
.glyphicon-indent-left:before{content:"\e057";}
.glyphicon-indent-right:before{content:"\e058";}
.glyphicon-facetime-video:before{content:"\e059";}
.glyphicon-picture:before{content:"\e060";}
.glyphicon-map-marker:before{content:"\e062";}
.glyphicon-adjust:before{content:"\e063";}
.glyphicon-tint:before{content:"\e064";}
.glyphicon-edit:before{content:"\e065";}
.glyphicon-share:before{content:"\e066";}
.glyphicon-check:before{content:"\e067";}
.glyphicon-move:before{content:"\e068";}
.glyphicon-step-backward:before{content:"\e069";}
.glyphicon-fast-backward:before{content:"\e070";}
.glyphicon-backward:before{content:"\e071";}
.glyphicon-play:before{content:"\e072";}
.glyphicon-pause:before{content:"\e073";}
.glyphicon-stop:before{content:"\e074";}
.glyphicon-forward:before{content:"\e075";}
.glyphicon-fast-forward:before{content:"\e076";}
.glyphicon-step-forward:before{content:"\e077";}
.glyphicon-eject:before{content:"\e078";}
.glyphicon-chevron-left:before{content:"\e079";}
.glyphicon-chevron-right:before{content:"\e080";}
.glyphicon-plus-sign:before{content:"\e081";}
.glyphicon-minus-sign:before{content:"\e082";}
.glyphicon-remove-sign:before{content:"\e083";}
.glyphicon-ok-sign:before{content:"\e084";}
.glyphicon-question-sign:before{content:"\e085";}
.glyphicon-info-sign:before{content:"\e086";}
.glyphicon-screenshot:before{content:"\e087";}
.glyphicon-remove-circle:before{content:"\e088";}
.glyphicon-ok-circle:before{content:"\e089";}
.glyphicon-ban-circle:before{content:"\e090";}
.glyphicon-arrow-left:before{content:"\e091";}
.glyphicon-arrow-right:before{content:"\e092";}
.glyphicon-arrow-up:before{content:"\e093";}
.glyphicon-arrow-down:before{content:"\e094";}
.glyphicon-share-alt:before{content:"\e095";}
.glyphicon-resize-full:before{content:"\e096";}
.glyphicon-resize-small:before{content:"\e097";}
.glyphicon-exclamation-sign:before{content:"\e101";}
.glyphicon-gift:before{content:"\e102";}
.glyphicon-leaf:before{content:"\e103";}
.glyphicon-eye-open:before{content:"\e105";}
.glyphicon-eye-close:before{content:"\e106";}
.glyphicon-warning-sign:before{content:"\e107";}
.glyphicon-plane:before{content:"\e108";}
.glyphicon-random:before{content:"\e110";}
.glyphicon-comment:before{content:"\e111";}
.glyphicon-magnet:before{content:"\e112";}
.glyphicon-chevron-up:before{content:"\e113";}
.glyphicon-chevron-down:before{content:"\e114";}
.glyphicon-retweet:before{content:"\e115";}
.glyphicon-shopping-cart:before{content:"\e116";}
.glyphicon-folder-close:before{content:"\e117";}
.glyphicon-folder-open:before{content:"\e118";}
.glyphicon-resize-vertical:before{content:"\e119";}
.glyphicon-resize-horizontal:before{content:"\e120";}
.glyphicon-hdd:before{content:"\e121";}
.glyphicon-bullhorn:before{content:"\e122";}
.glyphicon-certificate:before{content:"\e124";}
.glyphicon-thumbs-up:before{content:"\e125";}
.glyphicon-thumbs-down:before{content:"\e126";}
.glyphicon-hand-right:before{content:"\e127";}
.glyphicon-hand-left:before{content:"\e128";}
.glyphicon-hand-up:before{content:"\e129";}
.glyphicon-hand-down:before{content:"\e130";}
.glyphicon-circle-arrow-right:before{content:"\e131";}
.glyphicon-circle-arrow-left:before{content:"\e132";}
.glyphicon-circle-arrow-up:before{content:"\e133";}
.glyphicon-circle-arrow-down:before{content:"\e134";}
.glyphicon-globe:before{content:"\e135";}
.glyphicon-tasks:before{content:"\e137";}
.glyphicon-filter:before{content:"\e138";}
.glyphicon-fullscreen:before{content:"\e140";}
.glyphicon-dashboard:before{content:"\e141";}
.glyphicon-heart-empty:before{content:"\e143";}
.glyphicon-link:before{content:"\e144";}
.glyphicon-phone:before{content:"\e145";}
.glyphicon-usd:before{content:"\e148";}
.glyphicon-gbp:before{content:"\e149";}
.glyphicon-sort:before{content:"\e150";}
.glyphicon-sort-by-alphabet:before{content:"\e151";}
.glyphicon-sort-by-alphabet-alt:before{content:"\e152";}
.glyphicon-sort-by-order:before{content:"\e153";}
.glyphicon-sort-by-order-alt:before{content:"\e154";}
.glyphicon-sort-by-attributes:before{content:"\e155";}
.glyphicon-sort-by-attributes-alt:before{content:"\e156";}
.glyphicon-unchecked:before{content:"\e157";}
.glyphicon-expand:before{content:"\e158";}
.glyphicon-collapse-down:before{content:"\e159";}
.glyphicon-collapse-up:before{content:"\e160";}
.glyphicon-log-in:before{content:"\e161";}
.glyphicon-flash:before{content:"\e162";}
.glyphicon-log-out:before{content:"\e163";}
.glyphicon-new-window:before{content:"\e164";}
.glyphicon-record:before{content:"\e165";}
.glyphicon-save:before{content:"\e166";}
.glyphicon-open:before{content:"\e167";}
.glyphicon-saved:before{content:"\e168";}
.glyphicon-import:before{content:"\e169";}
.glyphicon-export:before{content:"\e170";}
.glyphicon-send:before{content:"\e171";}
.glyphicon-floppy-disk:before{content:"\e172";}
.glyphicon-floppy-saved:before{content:"\e173";}
.glyphicon-floppy-remove:before{content:"\e174";}
.glyphicon-floppy-save:before{content:"\e175";}
.glyphicon-floppy-open:before{content:"\e176";}
.glyphicon-credit-card:before{content:"\e177";}
.glyphicon-transfer:before{content:"\e178";}
.glyphicon-cutlery:before{content:"\e179";}
.glyphicon-header:before{content:"\e180";}
.glyphicon-compressed:before{content:"\e181";}
.glyphicon-earphone:before{content:"\e182";}
.glyphicon-phone-alt:before{content:"\e183";}
.glyphicon-tower:before{content:"\e184";}
.glyphicon-stats:before{content:"\e185";}
.glyphicon-sd-video:before{content:"\e186";}
.glyphicon-hd-video:before{content:"\e187";}
.glyphicon-subtitles:before{content:"\e188";}
.glyphicon-sound-stereo:before{content:"\e189";}
.glyphicon-sound-dolby:before{content:"\e190";}
.glyphicon-sound-5-1:before{content:"\e191";}
.glyphicon-sound-6-1:before{content:"\e192";}
.glyphicon-sound-7-1:before{content:"\e193";}
.glyphicon-copyright-mark:before{content:"\e194";}
.glyphicon-registration-mark:before{content:"\e195";}
.glyphicon-cloud-download:before{content:"\e197";}
.glyphicon-cloud-upload:before{content:"\e198";}
.glyphicon-tree-conifer:before{content:"\e199";}
.glyphicon-tree-deciduous:before{content:"\e200";}
.glyphicon-briefcase:before{content:"\1f4bc";}
.glyphicon-calendar:before{content:"\1f4c5";}
.glyphicon-pushpin:before{content:"\1f4cc";}
.glyphicon-paperclip:before{content:"\1f4ce";}
.glyphicon-camera:before{content:"\1f4f7";}
.glyphicon-lock:before{content:"\1f512";}
.glyphicon-bell:before{content:"\1f514";}
.glyphicon-bookmark:before{content:"\1f516";}
.glyphicon-fire:before{content:"\1f525";}
.glyphicon-wrench:before{content:"\1f527";}
Ainda não foi enviado com o bootstrap 4, mas agora a equipe do Bootstrap está desenvolvendo sua biblioteca de ícones.
Para pessoas que procuram soluções de uma linha, você pode importar apenas o Bootstrap Glyphicons:
<link href="https://stackoverflow.com//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
Visão geral:
Estou usando o bootstrap 4 sem glyphicons. Encontrei um problema com a visualização em árvore do bootstrap que depende de glyphicons. Estou usando o treeview como está e estou usando o scss @extend para traduzir os estilos de classe de ícone em estilos de classe impressionantes. Eu acho que isso é bastante liso (se você me perguntar)!
Detalhes:
Eu usei o scss @extend para lidar com isso para mim.
Anteriormente, eu decidi usar a fonte-awesome por nenhuma razão melhor do que a usei no passado.
Quando experimentei o bootstrap em árvores, descobri que os ícones estavam faltando, porque não havia glyphicons instalados.
Decidi usar o recurso scss @extend, para que as classes glyphicon usassem as classes font-awesome da seguinte maneira:
.treeview {
.glyphicon {
@extend .fa;
}
.glyphicon-minus {
@extend .fa-minus;
}
.glyphicon-plus {
@extend .fa-plus;
}
}
Se você estiver usando o Laravel 5.6, ele vem com o Bootstrap 4. Tudo o que você precisa é:
npm install and npm install open-iconic --save
Ao /resources/assets/sass/app.scss
alterar a linha de importação de fonte do Google na linha 2 para
@import '~open-iconic/font/css/open-iconic-bootstrap';
Tudo o que você precisa fazer agora é
npm run watch
e inclua
<link rel="stylesheet" href="{{asset('css/app.css')}}">
na parte superior do arquivo blade mestre e <script src="{{asset('js/app.js')}}"></script>
antes de fechar a etiqueta do corpo. Você receberá o Bootstrap 4 e o ícone.
O uso é <span class="oi oi-cog"></span>
Consulte aqui os detalhes do ícone: Open Iconic: Recommended by Bootstrap 4
Se em outro projeto que não seja o Laravel, você pode simplesmente importar @import 'node_modules/open-iconic/font/css/open-iconic-bootstrap-min.css';
no seu arquivo de estilo.
Espero que isto ajude. Feliz tentando.
Vamos para
https://github.com/Darkseal/bootstrap4-glyphicons
faça o download e inclua no seu código
<link href="bootstrap4-glyphicons/css/bootstrap-glyphicons.css" rel="stylesheet">