Bootstrap 4 - Migração de Glyphicons?

317

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?

Changelog

http://v4-alpha.getbootstrap.com/migration/

bootstrap-4 glyphicons Vincent Poirier
fonte
15
Você ainda pode usar glyphicons , eles simplesmente não serão mais enviados com o bootstrap. Se você tiver problemas de licença , poderá verificar os ícones impressionantes da fonte .
Holt
1
Eu acredito que você tem que pagar para usar a fonte. Eu editei a pergunta para esclarecer.
Vincent Poirier
Existe uma licença gratuita na qual você deve colocar um link para glyphicons (consulte a seção GLYPHICON FREE no meu link anterior). Como eu disse no meu comentário anterior, existem alternativas, como fonte incrível, que são de código aberto e gratuitas, mas saber qual é o melhor será claramente baseado em opiniões ...
Holt
Isso seria ótimo, mas o pacote gratuito não oferece a fonte, apenas os arquivos PNG. Aparentemente, apenas o pacote PRO inclui Todos os ícones como uma fonte da web . Embora você seja muito útil (obrigado), a pergunta é mais sobre os componentes incluídos no Bootstrap. Se você puder confirmar que nenhum ícone de qualquer tipo está (ou será) incluído na v4, é possível gerar uma resposta.
Vincent Poirier
Se você acessar o link fornecido fontawesome.io, será solicitado um pagamento de US $ 60 ou US $ 99 se você esperar demais, então acredito que o fontawesome não é mais gratuito.
Gustavo Rodríguez

Respostas:

269

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:

  1. Baixe e instale o Node, que usamos para gerenciar nossas dependências.
  2. Navegue para o /bootstrapdiretório raiz e execute npm installpara instalar nossas dependências locais listadas em package.json.
  3. Instale o Ruby, instale o Bundler e gem install bundler, finalmente, execute bundle install. Isso instalará todas as dependências do Ruby, como Jekyll e plugins.

Font Awesome

  1. Faça o download dos arquivos em https://github.com/FortAwesome/Font-Awesome/tree/fa-4
  2. Copie a font-awesome/scsspasta na sua pasta / bootstrap

  3. Abra seu SCSS /bootstrap/bootstrap.scsse anote o seguinte código SCSS no final deste arquivo:

    $fa-font-path: "../fonts"; @import "../font-awesome/scss/font-awesome.scss";

  4. Observe que você também deve copiar o arquivo de fonte de ou font-awesome/fontspara dist/fontsqualquer outra pasta pública definida $fa-font-pathna etapa anterior

  5. Execute: npm run distpara recompilar seu código com Font-Awesome

Octicons do Github

  1. Faça o download dos arquivos em https://github.com/github/octicons/
  2. Copie a octiconspasta para sua /bootstrappasta

  3. Abra seu SCSS /bootstrap/bootstrap.scsse anote o seguinte código SCSS no final deste arquivo:

    $fa-font-path: "../fonts"; @import "../octicons/octicons/octicons.scss";

  4. Observe que você também deve copiar o arquivo de fonte de ou font-awesome/fontspara dist/fontsqualquer outra pasta pública definida $fa-font-pathna etapa anterior

  5. Execute: npm run distpara recompilar seu código com o Octicons

Glyphicons

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.

  1. Copie os arquivos das fontes em: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
  2. Copie o arquivo https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss na sua bootstrap/scsspasta
  3. Abra seu scss /bootstrap/bootstrap.scss e anote o seguinte código SCSS no final deste arquivo:
$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: '../fonts/';
@import "glyphicons";
  1. Execute: npm run distpara recompilar seu código com Glyphicons

Observe 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-.scssarquivo 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.

Bass Jobsen
fonte
4
Isso foi muito completo e realmente ajudou a esclarecer as coisas para mim e a apontar na direção certa de minha escolha. Alguém sabe por que o BS4 decidiu não enviar com o conjunto Glyphicon Halflings? Apenas para emagrecer o pacote?
twknab
6
"Instalar Ruby" ?! Por que eu instalaria uma estrutura de desenvolvimento inteira apenas para usar uma fonte ?! E como você mencionou isso como uma nota lateral? É supercompleto, pois altera a semântica, constrói processos e dependências de todo o seu projeto apenas para chegar a uma fonte! É inconcebível para mim como você pode aconselhar a fazer isso.
precisa
261

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.

Fred
fonte
27
A maneira simples de integração sem alterações. THX!
l.cotonea
1
O princípio do KISS em ação!
Craig
7
Nem todos os nomes são iguais. Este é o mapa ícones glyphicon para font-incrível: gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9
Grigory Kislin
1
Isso é muito mais simples e direto do que a resposta aceita. Parabéns!
Luis.ap.uyen
6
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.
James Wilkins
37

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.

Fred
fonte
Fred Muito obrigado.
user3728517
Fred, obrigado. Os ícones estão sendo exibidos nos navegadores Firefox e Chrome. Mas no IE, os ícones são exibidos na versão 11.0.9600.19377, mas não na versão 11.0.9600.19356. Como posso fazer com que os ícones sejam exibidos na versão 11.0.9600.19356 do IE. Eu também tenho verificado o console e não há erros no IE versão 11.0.9600.19356
Hemant
@ Hemant, eu não sei. De qualquer forma, este post é muito antiga e de volta quando Glyphicons estava na versão 4. Hoje eu iria para a versão 5.
Fred
17

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";}
Expandir snippet

Роман Будённый
fonte
Funcionou como um prazer para mim! Obrigado!
theshadow124 30/03
3

Para pessoas que procuram soluções de uma linha, você pode importar apenas o Bootstrap Glyphicons:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
R. Gurung
fonte
Quebra um monte de outras coisas
Bob Claerhout
Eu adoraria saber mais. @BobClaerhout
R. Gurung
2 coisas que eu lembre-se: fonte de mudança e de bootstrap datepicker ( bootstrap-datepicker.readthedocs.io/en/latest ) perde o seu bom formato
Bob Claerhout
2

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;
  }
}
Sites Taylored
fonte
2

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.scssalterar 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.

Ershad Ahamed
fonte