Bootstrap 4 - Glyphicons Migration?

317

Wir haben ein Projekt, das Glyphicons intensiv nutzt. Bootstrap v4 löscht die Glyphicon-Schriftart vollständig.

Gibt es ein Äquivalent für Symbole, die mit Bootstrap V4 geliefert werden?

Änderungsprotokoll

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

bootstrap-4  glyphicons 
— Vincent Poirier
quelle
15
Sie können weiterhin Glyphicons verwenden , diese werden einfach nicht mehr mit Bootstrap geliefert . Wenn Sie ein Lizenzproblem haben , können Sie die fantastischen Symbole für Schriftarten überprüfen .
— Holt
1
Ich glaube, Sie müssen bezahlen, um die Schriftart zu verwenden. Ich habe die Frage bearbeitet, um sie zu klären.
— Vincent Poirier
Es gibt eine kostenlose Lizenz, in der Sie einen Link zu Glyphicons einfügen müssen (siehe Abschnitt GLYPHICON FREE in meinem vorherigen Link). Wie ich in meinem vorherigen Kommentar sagte, gibt es Alternativen wie Font Awesome, die Open Source und kostenlos sind, aber zu wissen, welche die beste ist, wird eindeutig meinungsbasiert sein ...
— Holt
Das wäre toll, aber das kostenlose Paket bietet nicht die Schriftart, sondern nur die PNG-Dateien. Anscheinend enthält nur das PRO-Paket Alle Symbole als Webschriftart . Obwohl Sie sehr hilfreich sind (danke), handelt es sich bei der Frage eher um in Bootstrap enthaltene Komponenten. Wenn Sie bestätigen können, dass in Version 4 keine Symbole jeglicher Art enthalten sind (oder sein werden), können Sie eine Antwort generieren.
— Vincent Poirier
Wenn Sie zu dem bereitgestellten Link fontawesome.io gehen, werden Sie um eine Zahlung von 60 oder 99 US-Dollar gebeten, wenn Sie zu lange warten. Ich glaube, fontawesome ist nicht mehr kostenlos.
— Gustavo Rodríguez

Antworten:

269

Sie können sowohl Font Awesome als auch Github Octicons als kostenlose Alternative für Glyphicons verwenden.

Bootstrap 4 wechselte auch von Less zu Sass, sodass Sie den Sass (SCSS) der Schriftart in Ihren Erstellungsprozess integrieren können, um eine einzelne CSS-Datei für Ihre Projekte zu erstellen.

Unter https://getbootstrap.com/docs/4.1/getting-started/build-tools/ finden Sie auch Informationen zum Einrichten Ihrer Werkzeuge:

  1. Laden Sie Node herunter und installieren Sie es, mit dem wir unsere Abhängigkeiten verwalten.
  2. Navigieren Sie zum Stammverzeichnis /bootstrapund führen Sie es aus npm install, um unsere in package.json aufgeführten lokalen Abhängigkeiten zu installieren.
  3. Installieren Sie Ruby, installieren Sie Bundler mit gem install bundlerund führen Sie es schließlich aus bundle install. Dadurch werden alle Ruby-Abhängigkeiten wie Jekyll und Plugins installiert.

Font Awesome

  1. Laden Sie die Dateien unter https://github.com/FortAwesome/Font-Awesome/tree/fa-4 herunter
  2. Kopieren Sie den font-awesome/scssOrdner in Ihren / bootstrap-Ordner

  3. Öffnen Sie Ihr SCSS /bootstrap/bootstrap.scssund notieren Sie den folgenden SCSS-Code am Ende dieser Datei:

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

  4. Beachten Sie, dass Sie müssen auch die Font - Datei kopieren aus font-awesome/fontszu dist/fontsoder einem anderen öffentlichen Ordner Satz von $fa-font-pathim vorherigen Schritt

  5. Ausführen: npm run distum Ihren Code mit Font-Awesome neu zu kompilieren

Github Octicons

  1. Laden Sie die Dateien unter https://github.com/github/octicons/ herunter.
  2. Kopieren Sie den octiconsOrdner in Ihren /bootstrapOrdner

  3. Öffnen Sie Ihr SCSS /bootstrap/bootstrap.scssund notieren Sie den folgenden SCSS-Code am Ende dieser Datei:

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

  4. Beachten Sie, dass Sie müssen auch die Font - Datei kopieren aus font-awesome/fontszu dist/fontsoder einem anderen öffentlichen Ordner Satz von $fa-font-pathim vorherigen Schritt

  5. Lauf: npm run dist um Ihren Code mit Octicons neu zu kompilieren

Glyphicons

Auf der Bootstrap-Website können Sie lesen:

Enthält über 250 Glyphen im Schriftformat aus dem Glyphicon Halflings-Set. Glyphicons Halblinge sind normalerweise nicht kostenlos erhältlich, aber ihr Schöpfer hat sie kostenlos für Bootstrap zur Verfügung gestellt. Als Dankeschön bitten wir Sie nur, wenn möglich einen Link zurück zu Glyphicons einzufügen.

Soweit ich weiß, können Sie diese 250 Glyphen kostenlos für Bootstrap verwenden, jedoch nicht exklusiv für Version 3. Sie können sie also auch für Bootstrap 4 verwenden.

  1. Kopieren Sie die Schriftdateien von: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
  2. Kopieren Sie die Datei https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss in Ihren bootstrap/scssOrdner
  3. Öffnen Sie Ihre Datei scss /bootstrap/bootstrap.scss und notieren Sie den folgenden SCSS-Code am Ende dieser Datei:
$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: '../fonts/';
@import "glyphicons";
  1. Ausführen: npm run distum Ihren Code mit Glyphicons neu zu kompilieren

Beachten Sie, dass für Bootstrap 4 der Post-CSS- Autoprefixer zum Kompilieren erforderlich ist . Wenn Sie zum Kompilieren Ihres CSS einen statischen Sass-Compiler verwenden, müssen Sie anschließend den Autoprefixer ausführen.

Weitere Informationen zum Mischen mit dem Bootstrap 4 SCSS finden Sie hier .

Sie können Bower auch verwenden, um die oben genannten Schriftarten zu installieren. Wenn Sie Bower Font Awesome verwenden, werden Ihre Dateien installiert. bower_components/components-font-awesome/Beachten Sie auch, dass Github Octicons octicons/octicons/octicons-.scssdie Datei als Hauptdatei festlegt, während Sie sie verwenden sollten octicons/octicons/sprockets-octicons.scss.

Alle oben genannten Elemente kompilieren Ihren gesamten CSS-Code, einschließlich in einer einzigen Datei, für die nur eine HTTP-Anforderung erforderlich ist. Alternativ können Sie auch die Schriftart Font-Awesome von CDN laden, was in vielen Situationen auch schnell sein kann. Beide Schriftarten auf CDN enthalten auch die Schriftdateien (unter Verwendung von Daten-URLs, möglicherweise nicht für ältere Browser unterstützt). Überlegen Sie sich also, welche Lösung am besten zu Ihrer Situation passt, abhängig von den zu unterstützenden Browsern.

Fügen Sie für Font Awesome den folgenden Code in den <head>HTML-Bereich Ihrer Website ein:

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

Versuchen Sie auch, mit dem Yeoman-Generator eine Front-End-Bootstrap 4-Web-App zu erstellen, um Bootstrap 4 mit Font Awesome oder Github Octicons zu testen.

— Bass Jobsen
quelle
4
Dies war sehr gründlich und hat mir wirklich geholfen, die Dinge zu klären und mich in die richtige Richtung meiner Wahl zu weisen. Weiß jemand, warum BS4 beschlossen hat, nicht mit Glyphicon Halflings Set zu versenden? Nur um das Paket abzunehmen?
— Twknab
6
"Ruby installieren"?! Warum sollte ich ein ganzes Entwicklungsframework installieren, um nur eine Schriftart zu verwenden?! Und warum erwähnen Sie es nur als Randnotiz? Es ist super, da es die Semantik ändert, Prozesse und Abhängigkeiten Ihres gesamten Projekts erstellt, nur um zu einer Schriftart zu gelangen! Es ist für mich unvorstellbar, wie Sie dazu raten können.
— Jens Mander
261

Die Migration von Glyphicons zu Font Awesome ist recht einfach.

Fügen Sie einen Verweis auf Font Awesome hinzu (entweder lokal oder verwenden Sie das CDN).

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

Führen Sie dann eine Suche durch und ersetzen Sie sie dort, wo Sie suchen, glyphicon glyphicon-und ersetzen Sie sie durch fa fa-. Die meisten CSS-Klassennamen sind gleich. Einige haben sich jedoch geändert, sodass Sie diese manuell beheben müssen.

— Fred
quelle
27
Der einfache Weg zur Integration ohne Änderungen. Danke!
— l.cotonea
1
Das KISS-Prinzip in Aktion!
— Craig
7
Nicht alle Namen sind gleich. Dies ist Map Glyphicon Icons zu font-awesome: gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9
— Grigory Kislin
1
Dies ist viel einfacher und unkomplizierter als die akzeptierte Antwort. Ein großes Lob!
— luis.ap.uyen
6
fa fa-wird abgeschrieben. Ihre Website sagt jetzt fas fa-, und diese Nachricht: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

Die Datei glyphicons.less von Bootstrap 3 ist auf GitHub verfügbar. https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less

Es braucht diese Variablen:

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

Anschließend können Sie die .less-Datei in eine .css-Datei konvertieren, die Sie direkt verwenden können. Sie können dies online unter lesscss.org/less-preview/ tun . Hier habe ich es für Sie getan , speichere es als glyphicons.css und füge es in deine HTML-Dateien ein.

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

Sie benötigen auch die Glyphicon-Schriftarten, die im Bootstrap 3-Paket enthalten sind. Legen Sie sie in einem Verzeichnis / fonts / ab.

Jetzt können Sie Glyphicons wie gewohnt mit Bootstrap 4 weiter verwenden.

— Fred
quelle
Fred Vielen Dank.
— user3728517
Fred, danke. Symbole werden in Firefox- und Chrome-Browsern angezeigt. Im IE werden Symbole jedoch in der Version 11.0.9600.19377 angezeigt, jedoch nicht in der Version 11.0.9600.19356. Wie kann ich die Symbole in der IE-Version 11.0.9600.19356 anzeigen lassen? Ich habe auch die Konsole überprüft und es gibt keine Fehler in IE Version 11.0.9600.19356
— Hemant
@Hemant, ich weiß es nicht. In jedem Fall ist dieser Beitrag sehr alt und stammt aus der Zeit, als Glyphicons in Version 4 war. Heute würde ich mich für Version 5 entscheiden.
— Fred
17

Wenn Sie nur Glyphicon-Klassen in CSS benötigen: 

@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";}
Erweitern Sie das Snippet

— Роман Будённый
quelle
Danke, es hat für die Datums- und Uhrzeitauswahl funktioniert.
— Avinash
Arbeitete wie ein Vergnügen für mich! Vielen Dank!
— theshadow124
3

Für Leute, die nach Einzeiler-Lösungen suchen, können Sie nur Bootstrap-Glyphicons importieren:

<link href="https://stackoverflow.com//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
— R. Gurung
quelle
Bricht viele andere Sachen
— Bob Claerhout
Ich würde gerne mehr wissen. @ BobClaerhout
— R. Gurung
2 Dinge, an die ich mich erinnere: Schriftartenänderung und Bootstrap-Datepicker ( bootstrap-datepicker.readthedocs.io/en/latest ) verlieren ihr schönes Format
— Bob Claerhout
2

Überblick:

Ich benutze Bootstrap 4 ohne Glyphicons. Ich habe ein Problem mit der Bootstrap-Baumansicht gefunden, das von Glyphicons abhängt. Ich verwende Treeview so wie es ist, und ich verwende scss @extend, um die Symbolklassenstile in fantastische Klassenstile zu übersetzen. Ich finde das ziemlich schlau (wenn du mich fragst)!

Einzelheiten:

Ich habe scss @extend verwendet, um das für mich zu erledigen.

Ich habe mich zuvor aus keinem besseren Grund für Font-Awesome entschieden als in der Vergangenheit.

Als ich Bootstrap Treeview ausprobierte, stellte ich fest, dass die Symbole fehlten, da ich keine Glyphicons installiert hatte.

Ich habe mich für die Funktion scss @extend entschieden, damit die Glyphicon-Klassen die font-awesome-Klassen wie folgt verwenden:

.treeview {
  .glyphicon {
    @extend .fa;
  }
  .glyphicon-minus {
    @extend .fa-minus;
  }
  .glyphicon-plus {
    @extend .fa-plus;
  }
}
— Taylored Websites
quelle
2

Wenn Sie Laravel 5.6 verwenden, wird Bootstrap 4 mitgeliefert. Sie müssen lediglich:

npm install and npm install open-iconic --save

Bei /resources/assets/sass/app.scssÄnderung der Zeile des Google-Schriftimports in Zeile 2 auf

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

Jetzt müssen Sie nur noch tun

npm run watch

und einschließen 

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

oben auf der Master Blade-Datei und <script src="{{asset('js/app.js')}}"></script> vor dem Schließen des Body-Tags. Sie erhalten Bootstrap 4 und ein Symbol.

Verwendung ist <span class="oi oi-cog"></span>

Hier finden Sie Details zu den Symbolen: Symbolen: Open Iconic: Empfohlen von Bootstrap 4

Wenn Sie ein anderes Projekt als Laravel verwenden, können Sie es einfach importieren @import 'node_modules/open-iconic/font/css/open-iconic-bootstrap-min.css'; in Ihre .

Hoffe das hilft. Viel Spaß beim Ausprobieren.

— Ershad Ahamed
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.