Bootstrap 4 - Migrasi Glyphicons?

317

Kami memiliki proyek yang menggunakan glyphicons secara intensif. Bootstrap v4 menjatuhkan font glyphicon sama sekali.

Apakah ada padanan untuk ikon yang dikirimkan dengan Bootstrap V4?

Changelog

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

bootstrap-4 glyphicons Vincent Poirier
sumber
15
Anda masih dapat menggunakan glyphicons , mereka tidak akan dikirim dengan bootstrap lagi. Jika Anda memiliki masalah lisensi , Anda dapat memeriksa ikon font yang mengagumkan .
Holt
1
Saya yakin Anda harus membayar untuk menggunakan font. Saya mengedit pertanyaan untuk mengklarifikasi.
Vincent Poirier
Ada lisensi gratis di mana Anda harus meletakkan tautan ke glyphicons (lihat bagian GLYPHICON FREE di tautan saya sebelumnya). Seperti yang saya katakan di komentar saya sebelumnya, ada alternatif seperti font yang mengagumkan yang open source dan gratis, tetapi mengetahui mana yang terbaik akan jelas berdasarkan opini ...
Holt
Itu akan bagus, tetapi paket gratis tidak menawarkan font, hanya file PNG. Rupanya, hanya paket PRO yang menyertakan Semua ikon sebagai font web . Meskipun Anda sangat membantu (terima kasih), pertanyaannya lebih lanjut tentang komponen yang disertakan dalam Bootstrap, jika Anda dapat mengonfirmasi bahwa tidak ada ikon jenis apa pun (atau akan) dimasukkan dalam v4, Anda dapat menghasilkan jawaban.
Vincent Poirier
Jika Anda pergi ke tautan yang disediakan fontawesome.io, Anda akan diminta pembayaran $ 60 atau $ 99 jika Anda menunggu terlalu banyak, jadi saya percaya, fontawesome tidak lagi gratis.
Gustavo Rodríguez

Jawaban:

269

Anda dapat menggunakan Font Awesome dan Github Octicons sebagai alternatif gratis untuk Glyphicons.

Bootstrap 4 juga beralih dari Less ke Sass, jadi Anda dapat memadukan font Sass (SCSS) ke dalam proses build Anda, untuk membuat file CSS tunggal untuk proyek Anda.

Lihat juga https://getbootstrap.com/docs/4.1/getting-started/build-tools/ untuk mengetahui cara mengatur alat Anda:

  1. Unduh dan instal Node, yang kami gunakan untuk mengelola dependensi kami.
  2. Arahkan ke /bootstrapdirektori root dan jalankan npm installuntuk menginstal dependensi lokal kami yang tercantum dalam package.json.
  3. Instal Ruby, instal Bundler dengan gem install bundler, dan akhirnya jalankan bundle install. Ini akan menginstal semua dependensi Ruby, seperti Jekyll dan plugins.

Font yang mengagumkan

  1. Unduh file di https://github.com/FortAwesome/Font-Awesome/tree/fa-4
  2. Salin font-awesome/scssfolder ke folder / bootstrap Anda

  3. Buka SCSS Anda /bootstrap/bootstrap.scssdan tuliskan kode SCSS berikut di akhir file ini:

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

  4. Perhatikan bahwa Anda juga harus menyalin file font dari font-awesome/fontske dist/fontsatau folder publik lainnya yang ditetapkan oleh $fa-font-pathpada langkah sebelumnya

  5. Jalankan: npm run distuntuk mengkompilasi ulang kode Anda dengan Font-Awesome

Github Octicons

  1. Unduh file di https://github.com/github/octicons/
  2. Salin octiconsfolder ke /bootstrapfolder Anda

  3. Buka SCSS Anda /bootstrap/bootstrap.scssdan tuliskan kode SCSS berikut di akhir file ini:

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

  4. Perhatikan bahwa Anda juga harus menyalin file font dari font-awesome/fontske dist/fontsatau folder publik lainnya yang ditetapkan oleh $fa-font-pathpada langkah sebelumnya

  5. Jalankan: npm run distuntuk mengkompilasi ulang kode Anda dengan Octicons

Glyphicons

Di situs web Bootstrap Anda dapat membaca:

Termasuk lebih dari 250 mesin terbang dalam format font dari set Glyphicon Halflings. Glyphicons Halflings biasanya tidak tersedia secara gratis, tetapi pembuatnya telah membuatnya tersedia untuk Bootstrap gratis. Sebagai ucapan terima kasih, kami hanya meminta Anda menyertakan tautan kembali ke Glyphicons jika memungkinkan.

Seperti yang saya mengerti Anda dapat menggunakan 250 mesin terbang ini bebas biaya terbatas untuk Bootstrap tetapi tidak terbatas pada versi 3 eksklusif. Jadi Anda dapat menggunakannya untuk Bootstrap 4 juga.

  1. Salin file font dari: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
  2. Salin file https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss ke bootstrap/scssfolder Anda
  3. Buka scss /bootstrap/bootstrap.scss Anda dan tuliskan kode SCSS berikut di akhir file ini:
$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: '../fonts/';
@import "glyphicons";
  1. Jalankan: npm run distuntuk mengkompilasi ulang kode Anda dengan Glyphicons

Perhatikan bahwa Bootstrap 4 memerlukan post Autoprefixer CSS untuk dikompilasi. Ketika Anda menggunakan kompiler Sass statis untuk mengkompilasi CSS Anda, Anda harus menjalankan Autoprefixer sesudahnya.

Anda dapat mengetahui lebih lanjut tentang pencampuran dengan Bootstrap 4 SCSS di sini .

Anda juga dapat menggunakan Bower untuk menginstal font di atas. Menggunakan Bower Font Awesome menginstal file Anda bower_components/components-font-awesome/juga perhatikan bahwa Github Octicons menetapkan octicons/octicons/octicons-.scssfile utama saat Anda harus menggunakannya octicons/octicons/sprockets-octicons.scss.

Semua hal di atas akan mengkompilasi semua kode CSS Anda termasuk ke dalam satu file, yang hanya membutuhkan satu permintaan HTTP. Atau Anda juga dapat memuat font Font-Awesome dari CDN, yang bisa cepat juga dalam banyak situasi. Kedua font pada CDN juga termasuk file font (menggunakan data-uri, mungkin tidak didukung untuk browser yang lebih lama). Jadi pertimbangkan solusi mana yang paling sesuai dengan situasi Anda, tergantung pada browser yang didukung.

Untuk Font Awesome rekatkan kode berikut ke dalam <head>bagian HTML situs Anda:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Coba juga generator Yeoman untuk merancah aplikasi Web Bootstrap 4 front-end untuk menguji Bootstrap 4 dengan Font Awesome atau Github Octicons.

Bass Jobsen
sumber
4
Ini sangat menyeluruh dan benar-benar membantu memperjelas hal-hal untuk saya dan mengarahkan saya ke arah yang saya pilih. Adakah yang tahu mengapa BS4 memutuskan untuk tidak mengirim dengan Glyphicon Halflings set? Hanya untuk menurunkan paket?
twknab
6
"Instal Ruby" ?! Mengapa saya menginstal keseluruhan kerangka kerja pengembangan hanya untuk menggunakan font ?! Dan kenapa Anda hanya menyebutkannya sebagai catatan? Ini super karena mengubah semantik, membangun proses, dan dependensi seluruh proyek Anda hanya untuk mendapatkan font! Bagi saya tidak masuk akal bagaimana Anda bisa menyarankan untuk melakukan itu.
Jens Mander
261

Bermigrasi dari Glyphicons ke Font Awesome cukup mudah.

Sertakan referensi untuk Font Awesome (baik lokal, atau gunakan CDN).

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Kemudian jalankan pencarian dan ganti tempat Anda mencari glyphicon glyphicon-dan ganti dengan fa fa-. Sebagian besar nama kelas CSS adalah sama. Beberapa telah berubah, jadi Anda harus memperbaikinya secara manual.

Fred
sumber
27
Cara sederhana untuk integrasi tanpa perubahan. Terima kasih!
l.cotonea
1
Prinsip KISS beraksi!
Craig
7
Tidak semua nama sama. Ini peta ikon glyphicon ke font-mengagumkan: gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9
Grigory Kislin
1
Ini jauh lebih sederhana dan langsung daripada jawaban yang diterima. Pujian!
luis.ap.uyen
6
fa fa-disusutkan. Situs web mereka sekarang mengatakan fas fa-, dan pesan ini: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

File glyphicons.less dari Bootstrap 3 tersedia di GitHub. https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less

Perlu variabel-variabel ini:

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";
@icon-font-svg-id:        "glyphicons_halflingsregular";

Kemudian Anda dapat mengonversi file .less ke file .css yang dapat Anda gunakan secara langsung. Anda dapat melakukan ini secara online di lesscss.org/less-preview/ . Di sini saya telah melakukannya untuk Anda , simpan sebagai glyphicons.css dan sertakan dalam file HTML Anda.

<link href="https://stackoverflow.com/Content/glyphicons.css" rel="stylesheet" />

Anda juga memerlukan font Glyphicon yang ada dalam paket Bootstrap 3, letakkan di direktori / fonts /.

Sekarang Anda bisa terus menggunakan Glyphicons dengan Bootstrap 4 seperti biasa.

Fred
sumber
Fred, terima kasih banyak.
user3728517
Fred, Terima Kasih. Ikon ditampilkan di Firefox dan browser Chrome. Namun dalam IE, Ikon ditampilkan dalam versi 11.0.9600.19377 tetapi tidak dalam versi 11.0.9600.19356. Bagaimana saya bisa membuat ikon untuk ditampilkan di IE versi 11.0.9600.19356. Saya juga telah memeriksa konsol dan tidak ada kesalahan dalam versi IE 11.0.9600.19356
Hemant
@Hemant, saya tidak tahu. Either way, posting ini sangat tua dan dari belakang ketika Glyphicons berada di versi 4. Hari ini saya akan pergi untuk versi 5.
Fred
17

Jika hanya membutuhkan kelas glyphicon di 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";}
Luaskan cuplikan

Роман Будённый
sumber
Bekerja seperti hadiah untukku! Terima kasih!
theshadow124
3

Untuk orang yang mencari solusi satu-liner, Anda dapat mengimpor Bootstrap Glyphicons saja:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
R. Gurung
sumber
Menghancurkan
Saya ingin tahu lebih banyak. @BobClaerhout
R. Gurung
2 hal yang saya ingat: perubahan font dan datepicker bootstrap ( bootstrap-datepicker.readthedocs.io/en/latest ) kehilangan formatnya yang bagus
Bob Claerhout
2

Gambaran:

Saya menggunakan bootstrap 4 tanpa glyphicons. Saya menemukan masalah dengan bootstrap treeview yang tergantung pada glyphicons. Saya menggunakan treeview apa adanya, dan saya menggunakan scss @extend untuk menerjemahkan gaya ikon kelas menjadi font gaya kelas keren. Saya pikir ini cukup apik (jika Anda bertanya kepada saya)!

Detail:

Saya menggunakan scss @extend untuk menanganinya untuk saya.

Saya sebelumnya memutuskan untuk menggunakan font-mengagumkan tanpa alasan yang lebih baik daripada saya telah menggunakannya di masa lalu.

Ketika saya pergi untuk mencoba bootstrap treeview, saya menemukan bahwa ikonnya hilang, karena saya tidak menginstal glyphicons.

Saya memutuskan untuk menggunakan fitur scss @extend, agar kelas glyphicon menggunakan kelas font-mengagumkan seperti:

.treeview {
  .glyphicon {
    @extend .fa;
  }
  .glyphicon-minus {
    @extend .fa-minus;
  }
  .glyphicon-plus {
    @extend .fa-plus;
  }
}
Situs Web Taylored
sumber
2

Jika Anda menggunakan Laravel 5.6, ia datang dengan Bootstrap 4. Yang Anda butuhkan adalah:

npm install and npm install open-iconic --save

Di /resources/assets/sass/app.scssubah baris impor font Google pada baris 2 menjadi

@import '~open-iconic/font/css/open-iconic-bootstrap';

Yang perlu Anda lakukan sekarang adalah

npm run watch

dan termasuk 

<link rel="stylesheet" href="{{asset('css/app.css')}}">

di atas file master blade dan <script src="{{asset('js/app.js')}}"></script>sebelum menutup tag body. Anda akan mendapatkan Bootstrap 4 dan ikon.

Penggunaan adalah <span class="oi oi-cog"></span>

Rujuk di sini untuk detail ikon: Buka Ikon: Direkomendasikan oleh Bootstrap 4

Jika pada proyek lain selain Laravel, Anda bisa melakukan impor @import 'node_modules/open-iconic/font/css/open-iconic-bootstrap-min.css';dalam file gaya Anda.

Semoga ini membantu. Selamat mencoba.

Irsyad Ahamed
sumber