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?
bootstrap-4
glyphicons
Vincent Poirier
quelle
quelle
Antworten:
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:
/bootstrap
und führen Sie es ausnpm install
, um unsere in package.json aufgeführten lokalen Abhängigkeiten zu installieren.gem install bundler
und führen Sie es schließlich ausbundle install
. Dadurch werden alle Ruby-Abhängigkeiten wie Jekyll und Plugins installiert.Font Awesome
font-awesome/scss
Ordner in Ihren / bootstrap-OrdnerÖffnen Sie Ihr SCSS
/bootstrap/bootstrap.scss
und notieren Sie den folgenden SCSS-Code am Ende dieser Datei:$fa-font-path: "../fonts"; @import "../font-awesome/scss/font-awesome.scss";
Beachten Sie, dass Sie müssen auch die Font - Datei kopieren aus
font-awesome/fonts
zudist/fonts
oder einem anderen öffentlichen Ordner Satz von$fa-font-path
im vorherigen Schrittnpm run dist
um Ihren Code mit Font-Awesome neu zu kompilierenGithub Octicons
octicons
Ordner in Ihren/bootstrap
OrdnerÖffnen Sie Ihr SCSS
/bootstrap/bootstrap.scss
und notieren Sie den folgenden SCSS-Code am Ende dieser Datei:$fa-font-path: "../fonts"; @import "../octicons/octicons/octicons.scss";
Beachten Sie, dass Sie müssen auch die Font - Datei kopieren aus
font-awesome/fonts
zudist/fonts
oder einem anderen öffentlichen Ordner Satz von$fa-font-path
im vorherigen Schrittnpm run dist
um Ihren Code mit Octicons neu zu kompilierenGlyphicons
Auf der Bootstrap-Website können Sie lesen:
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.
bootstrap/scss
Ordnernpm run dist
um Ihren Code mit Glyphicons neu zu kompilierenBeachten 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 Octiconsocticons/octicons/octicons-.scss
die Datei als Hauptdatei festlegt, während Sie sie verwenden solltenocticons/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: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.
quelle
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).
Führen Sie dann eine Suche durch und ersetzen Sie sie dort, wo Sie suchen,
glyphicon glyphicon-
und ersetzen Sie sie durchfa fa-
. Die meisten CSS-Klassennamen sind gleich. Einige haben sich jedoch geändert, sodass Sie diese manuell beheben müssen.quelle
fa fa-
wird abgeschrieben. Ihre Website sagt jetztfas 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.
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:
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.
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.
quelle
Wenn Sie nur Glyphicon-Klassen in CSS benötigen:
quelle
Es wird noch nicht mit Bootstrap 4 ausgeliefert, aber jetzt entwickelt das Bootstrap-Team seine Symbolbibliothek.
https://icons.getbootstrap.com/
https://github.com/twbs/icons
quelle
Für Leute, die nach Einzeiler-Lösungen suchen, können Sie nur Bootstrap-Glyphicons importieren:
quelle
Ü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:
quelle
Wenn Sie Laravel 5.6 verwenden, wird Bootstrap 4 mitgeliefert. Sie müssen lediglich:
Bei
/resources/assets/sass/app.scss
Änderung der Zeile des Google-Schriftimports in Zeile 2 aufJetzt müssen Sie nur noch tun
und einschließen
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.
quelle
Gehe zu
https://github.com/Darkseal/bootstrap4-glyphicons
herunterladen und in Ihren Code aufnehmen
quelle