Bootstrap 4 - Glyphicons Migration?

Können Sie sowohl Font Awesome und Github Octicons als Kostenlose alternative für die Glyphicons.

Bootstrap-4 auch den Wechsel von Weniger zu Sass, so dass Sie vielleicht integerate die schriftart Sass (SCSS) in Ihr build-Prozess zu einer einzigen CSS-Datei für Ihre Projekte.

Siehe auch https://getbootstrap.com/docs/4.1/getting-started/build-tools/, um herauszufinden, wie Sie Ihr System einrichten Werkzeuge:

1. Herunterladen und installieren von Knoten, die wir zur Verwaltung unserer Abhängigkeiten.
2. Navigieren Sie zum root - /bootstrap - Verzeichnis und führen Sie npm install installieren unsere lokalen Abhängigkeiten aufgeführt im Paket.json.
3. Ruby, install Bundler mit gem install bundler, und schließlich laufen bundle install. Dies installiert alle Ruby-Abhängigkeiten, wie Jekyll und plugins.

Font Awesome

1. Laden Sie die Dateien auf https://github.com/FortAwesome/Font-Awesome/tree/fa-4
2. Kopieren Sie die font-awesome/scss Ordner in Ihrem /bootstrap Ordner

3. Öffnen Sie Ihre SCSS /bootstrap/bootstrap.scss und notieren Sie sich die folgenden SCSS-code am Ende dieser Datei:

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

4. Beachten Sie, dass Sie auch zu kopieren Sie die font-Datei von font-awesome/fonts zu dist/fonts oder eine andere öffentliche Ordner-set von $fa-font-path im vorherigen Schritt

5. Run: npm run dist kompilieren Sie Ihren code mit Font-Awesome

Github Octicons

1. Laden Sie die Dateien auf https://github.com/github/octicons/
2. Kopieren Sie die octicons Ordner in Ihrem /bootstrap Ordner

3. Öffnen Sie Ihre SCSS /bootstrap/bootstrap.scss und notieren Sie sich die folgenden SCSS-code am Ende dieser Datei:

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

4. Beachten Sie, dass Sie auch zu kopieren Sie die font-Datei von font-awesome/fonts zu dist/fonts oder eine andere öffentliche Ordner-set von $fa-font-path im vorherigen Schritt

5. Run: npm run dist kompilieren Sie Ihren code mit Octicons

Glyphicons

Auf der Bootstrap-website können Sie Lesen:

Umfasst mehr als 250 Glyphen im font-format von der Glyphicon Halblinge-set. Glyphicons Halblinge sind normalerweise nicht frei verfügbar, aber Ihre Schöpfer Sie gemacht hat zur Verfügung für die Bootstrap-kostenlos. Als Dankeschön, wir bitten nur, dass Sie einen link zurück zu Glyphicons, Wann immer möglich.

Wie ich Sie verstehe, können Sie diese 250 Glyphen frei von Kosten beschränkt, für die Bootstrap-nicht aber beschränkt auf-version-3-exklusiv. So können Sie Sie für die Bootstrap-4 zu.

1. Kopieren Sie die Schriftarten-Dateien aus: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
2. Kopieren Sie die https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss - Datei in Ihr bootstrap/scss Ordner

3. Öffnen Sie Ihre scss /bootstrap/bootstrap.scss und notieren Sie sich die 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";

4. Run: npm run dist kompilieren Sie Ihren code mit Glyphicons

Beachten Sie, dass die Bootstrap-4 verlangt die post CSS Autoprefixer für die Zusammenstellung. Wenn Sie eine statische Sass-compiler zu kompilieren, CSS-sollten Sie laufen die Autoprefixer danach.

Erfahren Sie mehr über das mischen mit der Bootstrap-4 SCSS in hier.

Können Sie auch verwenden, Bower zu installieren, die fonts oben. Mit Bower Font Awesome installiert Ihre Dateien in bower_components/components-font-awesome/ auch feststellen, dass Github Octicons legt die octicons/octicons/octicons-.scss wie die Haupt-Datei, während Sie Sie verwenden sollten octicons/octicons/sprockets-octicons.scss.

Alle der oben kompilieren Sie alle Ihre CSS-code auch in eine einzige Datei, die benötigt nur einen HTTP-request. Alternativ können Sie auch laden Sie die Font-Awesome-font von CDN, das kann auch schnell zu sein in vielen Situationen. Beide Schriftarten auf CDN auch gehören die Schrift-Dateien (mithilfe von data-uri ' s, möglich nicht unterstützt, bei älteren Browsern). So prüfen Sie, welche Lösung am besten zu Ihrer situation passt, abhängig unter anderem von Browsern zu unterstützen.

Für Font-Awesome fügen Sie den folgenden code in das <head> - Abschnitt Ihrer HTML-Seiten:

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

Versuchen Sie auch Yeoman-generator scaffold aus einem front-end-Bootstrap-4 Web-app zu testen Bootstrap-4 mit Font Awesome oder Github Octicons.

InformationsquelleAutor der Antwort Bass Jobsen

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

Braucht es diese Variablen:

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

Dann können Sie konvertieren .weniger Datei ein .css-Datei, die Sie direkt verwenden können. Sie können dies online auf less2css.org. Hier habe ich es für dich erledigt, speichern Sie es als glyphicons.css und fügen ihn in Ihre HTML-Dateien.

<link href="/Content/glyphicons.css"  />

Müssen Sie auch die Glyphicon-Schriften, die in der Bootstrap-3-Paket, legen Sie Sie in eine /fonts/Verzeichnis.

Jetzt können Sie nur halten Sie auf mit mit Bootstrap Glyphicons 4 wie gewohnt.

InformationsquelleAutor der Antwort Fred

Wenn Sie mit Laravel 5.6, kommt es mit Bootstrap 4. Alles, was Sie brauchen, ist:

npm install and npm install open-iconic --save

In /resources/assets/sass/app.scss ändern Sie die Zeile von der Google font-import in Zeile 2 zu

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

Alles, was Sie jetzt noch tun müssen, ist

npm run watch

beinhalten und

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

oben auf master blade Datei-und <script src="{{asset('js/app.js')}}"></script> vor dem schließenden body-tag. Sie erhalten Bootstrap-4 und Symbol.

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

Finden Sie hier für icon-details: Öffnen Legendären: Empfohlen von Bootstrap 4

Wenn auf andere Projekt als Laravel, können Sie nur importieren @import 'node_modules/open-iconic/font/css/open-iconic-bootstrap-min.css'; in Ihre Stil-Datei.

Hoffe, das hilft. Glücklich zu versuchen.

InformationsquelleAutor der Antwort Ershad Ahamed