Bootstrap 4 - Migracja glifonów?

317

Mamy projekt intensywnie wykorzystujący glifikony. Bootstrap v4 całkowicie upuszcza czcionkę glifikonu.

Czy istnieje odpowiednik ikon dostarczanych z Bootstrap V4?

Dziennik zmian

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

bootstrap-4 glyphicons Vincent Poirier
źródło
15
Nadal możesz używać glifikonów , po prostu nie będą one już dostarczane z bootstrapem. Jeśli masz problem z licencją , możesz sprawdzić niesamowite ikony czcionek .
Holt
1
Uważam, że musisz zapłacić, aby użyć czcionki. Zredagowałem pytanie, aby wyjaśnić.
Vincent Poirier,
Istnieje bezpłatna licencja, w której musisz umieścić link do glifikonów (patrz sekcja DARMOWA GLYFIKON w moim poprzednim linku). Jak powiedziałem w moim poprzednim komentarzu, istnieją rozwiązania alternatywne, takie jak czcionki, które są niesamowite open source i wolne, ale wiedząc, który z nich jest najlepszy będzie wyraźnie opiera się opinia ...
Holt
Byłoby świetnie, ale darmowy pakiet nie oferuje czcionki, tylko pliki PNG. Najwyraźniej tylko pakiet PRO zawiera wszystkie ikony jako czcionkę internetową . Chociaż jesteś bardzo pomocny (dziękuję), pytanie dotyczy bardziej zawartych komponentów w Bootstrap, jeśli możesz potwierdzić, że żadne ikony jakiegokolwiek typu nie są (lub będą) zawarte w v4, możesz wygenerować odpowiedź.
Vincent Poirier,
Jeśli przejdziesz na podany link fontawesome.io, zostaniesz poproszony o płatność w wysokości 60 USD lub 99 USD, jeśli będziesz czekać zbyt długo, więc uważam, że fontawesome nie jest już bezpłatny.
Gustavo Rodríguez

Odpowiedzi:

269

Możesz używać zarówno Font Awesome, jak i Github Octicons jako darmowej alternatywy dla Glyphicons.

Bootstrap 4 również zmienił się z Less na Sass, więc możesz zintegrować Sass (SCSS) czcionki w procesie kompilacji, aby utworzyć pojedynczy plik CSS dla swoich projektów.

Zobacz także https://getbootstrap.com/docs/4.1/getting-started/build-tools/, aby dowiedzieć się, jak skonfigurować narzędzia:

  1. Pobierz i zainstaluj Węzeł, którego używamy do zarządzania naszymi zależnościami.
  2. Przejdź do /bootstrapkatalogu głównego i uruchom, npm installaby zainstalować nasze lokalne zależności wymienione w pliku package.json.
  3. Zainstaluj Ruby, zainstaluj Bundler gem install bundleri wreszcie uruchom bundle install. Spowoduje to zainstalowanie wszystkich zależności Ruby, takich jak Jekyll i wtyczki.

Czcionka Awesome

  1. Pobierz pliki na https://github.com/FortAwesome/Font-Awesome/tree/fa-4
  2. Skopiuj font-awesome/scssfolder do folderu / bootstrap

  3. Otwórz swój SCSS /bootstrap/bootstrap.scssi zapisz następujący kod SCSS na końcu tego pliku:

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

  4. Zauważ, że musisz również skopiować plik czcionki z lub font-awesome/fontsdo dist/fontsdowolnego folderu publicznego ustawionego $fa-font-pathw poprzednim kroku

  5. Uruchom: npm run distaby ponownie skompilować kod za pomocą Font-Awesome

Github Octicons

  1. Pobierz pliki na https://github.com/github/octicons/
  2. Skopiuj octiconsfolder do swojego /bootstrapfolderu

  3. Otwórz swój SCSS /bootstrap/bootstrap.scssi zapisz następujący kod SCSS na końcu tego pliku:

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

  4. Zauważ, że musisz również skopiować plik czcionki z lub font-awesome/fontsdo dist/fontsdowolnego folderu publicznego ustawionego $fa-font-pathw poprzednim kroku

  5. Uruchom: npm run distaby ponownie skompilować kod za pomocą Octicons

Glify

Na stronie Bootstrap możesz przeczytać:

Zawiera ponad 250 glifów w formacie czcionki z zestawu Glyphicon Halflings. Niziołki Glyphicons zwykle nie są dostępne za darmo, ale ich twórca udostępnił je bezpłatnie za Bootstrap. W ramach podziękowania prosimy tylko o dołączenie linku do Glyphicons, o ile to możliwe.

Rozumiem, że możesz używać tych 250 glifów bezpłatnie dla programu Bootstrap, ale nie tylko dla wersji 3. Możesz więc użyć ich również do Bootstrap 4.

  1. Skopiuj pliki czcionek z: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
  2. Skopiuj plik https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss do swojego bootstrap/scssfolderu
  3. Otwórz plik scss /bootstrap/bootstrap.scss i zapisz następujący kod SCSS na końcu tego pliku:
$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: '../fonts/';
@import "glyphicons";
  1. Uruchom: npm run distaby ponownie skompilować kod za pomocą Glyphicons

Zauważ, że Bootstrap 4 wymaga kompilacji Post CSS Autoprefixer . Kiedy używasz statycznego kompilatora Sass do kompilacji CSS, powinieneś później uruchomić Autoprefixer.

Możesz dowiedzieć się więcej na temat miksowania za pomocą Bootstrap 4 SCSS tutaj .

Możesz również użyć Bower, aby zainstalować powyższe czcionki. Korzystanie z Bower Font Awesome instaluje pliki, bower_components/components-font-awesome/zauważ również, że Github Octicons ustawia octicons/octicons/octicons-.scssjako główny plik, którego powinieneś używać octicons/octicons/sprockets-octicons.scss.

Wszystkie powyższe skompilują cały kod CSS, w tym w jednym pliku, który wymaga tylko jednego żądania HTTP. Możesz też załadować czcionkę Font-Awesome z CDN, która może być szybka w wielu sytuacjach. Obie czcionki w CDN zawierają również pliki czcionek (przy użyciu data-uri, możliwe nieobsługiwane w starszych przeglądarkach). Zastanów się, które rozwiązanie najlepiej pasuje do Twojej sytuacji, w zależności od obsługiwanych przeglądarek.

W przypadku Font Awesome wklej następujący kod do <head>sekcji kodu HTML swojej witryny:

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

Spróbuj także generatora Yeoman, aby wyodrębnić frontową aplikację internetową Bootstrap 4, aby przetestować Bootstrap 4 za pomocą Font Awesome lub Github Octicons.

Bass Jobsen
źródło
4
Było to bardzo dokładne i naprawdę pomogło mi to wyjaśnić i wskazać właściwy kierunek, który wybrałem. Czy ktoś wie, dlaczego BS4 zdecydowało się nie wysyłać z zestawem Glyphicon Halflings? Po prostu odchudzić paczkę?
twknab
6
„Zainstalować Ruby” ?! Dlaczego miałbym instalować całą platformę programistyczną tylko po to, aby używać czcionki ?! A dlaczego wspomniałeś o tym jako notatkę dodatkową? Jest ogromny, ponieważ zmienia semantykę, buduje procesy i zależności całego projektu, aby dostać się do czcionki! Nie sposób mi wyobrazić, jak możesz to zrobić.
Jens Mander
261

Migracja z Glyphicons do Font Awesome jest dość łatwa.

Dołącz odniesienie do Font Awesome (lokalnie lub użyj CDN).

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

Następnie uruchom wyszukiwanie i zamień miejsce, w którym szukasz, glyphicon glyphicon-i zamień je na fa fa-. Większość nazw klas CSS jest taka sama. Niektóre uległy zmianie, więc musisz je ręcznie naprawić.

Fred
źródło
27
Prosty sposób na integrację bez zmian. Dzięki!
l.cotonea
1
Zasada KISS w akcji!
Craig
7
Nie wszystkie imiona są takie same. To jest mapa ikon glifów na niesamowite: gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9
Grigory Kislin
1
Jest to o wiele prostsze i bardziej bezpośrednie niż zaakceptowana odpowiedź. Sława!
luis.ap.uyen
6
fa fa-jest amortyzowane. Ich strona internetowa mówi teraz fas fa-i ta wiadomość: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

Plik glyphicons.less z Bootstrap 3 jest dostępny na GitHub. https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less

Potrzebuje tych zmiennych:

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

Następnie możesz przekonwertować plik .less na plik .css, którego możesz użyć bezpośrednio. Możesz to zrobić online na lesscss.org/less-preview/ . Tutaj zrobiłem to dla ciebie , zapisz jako glyphicons.css i dołącz do swoich plików HTML.

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

Potrzebujesz także czcionek Glyphicon, które znajdują się w pakiecie Bootstrap 3, umieść je w katalogu / fonts /.

Teraz możesz nadal używać Glyphicons z Bootstrap 4 jak zwykle.

Fred
źródło
Fred Dziękuję bardzo.
user3728517
Fred, dziękuję. Ikony są wyświetlane w przeglądarkach Firefox i Chrome. Ale w IE ikony są wyświetlane w wersji 11.0.9600.19377, ale nie w wersji 11.0.9600.19356. Jak zrobić ikony do wyświetlania w IE 11.0.9600.19356. Sprawdziłem również konsolę i nie ma błędów w wersji IE 11.0.9600.19356
Hemant
@Hemant, nie wiem. Tak czy inaczej, ten post jest bardzo stary i od czasów, gdy Glyphicons był w wersji 4. Dzisiaj wybrałbym wersję 5.
Fred
17

Jeśli potrzebujesz tylko klas glifów w 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";}
Rozwiń fragment kodu

Роман Будённый
źródło
Dla mnie zadziałało! Dzięki!
theshadow124
3

Dla osób, które szukają rozwiązań jednowarstwowych, możesz zaimportować tylko Glifikony Bootstrap:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
R. Gurung
źródło
Łamie wiele innych rzeczy
Bob Claerhout
Chciałbym wiedzieć więcej. @BobClaerhout
R. Gurung
2 rzeczy, które pamiętam: zmiana czcionki i datapicker bootstrap ( bootstrap-datepicker.readthedocs.io/en/latest ) tracą ładny format
Bob Claerhout
2

Przegląd:

Używam bootstrap 4 bez glifikonów. Znalazłem problem z widokiem drzewa ładowania początkowego, który zależy od glifikonów. Korzystam z widoku drzewa w obecnej postaci i używam scss @extend do przetłumaczenia stylów klas ikon na niesamowite style klas czcionek. Myślę, że to całkiem sprytne (jeśli mnie pytasz)!

Detale:

Użyłem scss @extend, aby sobie z tym poradzić.

Wcześniej zdecydowałem się na użycie czcionek-awesome bez żadnego lepszego powodu niż w przeszłości.

Kiedy poszedłem wypróbować widok drzewa ładowania początkowego, zauważyłem brak ikon, ponieważ nie miałem zainstalowanych glifikonów.

Zdecydowałem się użyć funkcji scss @extend, aby klasy glifikonów korzystały z klas niesamowitych czcionek, ponieważ:

.treeview {
  .glyphicon {
    @extend .fa;
  }
  .glyphicon-minus {
    @extend .fa-minus;
  }
  .glyphicon-plus {
    @extend .fa-plus;
  }
}
Witryny sieci Taylored
źródło
2

Jeśli korzystasz z Laravel 5.6, jest on wyposażony w Bootstrap 4. Wszystko czego potrzebujesz to:

npm install and npm install open-iconic --save

Przy /resources/assets/sass/app.scsszmianie linii importu czcionek Google w linii 2 na

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

Wszystko, co musisz teraz zrobić, to

npm run watch

i obejmują 

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

na górze głównego pliku bloku i <script src="{{asset('js/app.js')}}"></script>przed zamknięciem znacznika body. Otrzymasz Bootstrap 4 i ikonę.

Wykorzystanie jest <span class="oi oi-cog"></span>

Zobacz szczegóły ikony: Otwórz Iconic: Zalecane przez Bootstrap 4

Jeśli w innym projekcie niż Laravel, możesz po prostu zaimportować @import 'node_modules/open-iconic/font/css/open-iconic-bootstrap-min.css';do swojego pliku stylu.

Mam nadzieję że to pomoże. Miłego próbowania.

Ershad Ahamed
źródło