webentwicklung-frage-antwort-db.com.de

Bootstrap 4 - Glyphicons Migration?

Wir haben ein Projekt, das Glyphicons intensiv nutzt. Bootstrap v4 löscht die Glyphicon-Schrift insgesamt.

Gibt es eine Entsprechung für Symbole, die mit Bootstrap V4 geliefert werden?

Changelog

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

278
Vincent Poirier

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

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

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

  1. Laden Sie Node herunter und installieren Sie es, mit dem wir unsere Abhängigkeiten verwalten.
  2. Navigieren Sie zum Stammverzeichnis /bootstrap und führen Sie npm install aus, um unsere in package.json aufgelisteten lokalen Abhängigkeiten zu installieren.
  3. Installieren Sie Ruby, installieren Sie Bundler mit gem install bundler und führen Sie schließlich bundle install aus. 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 Ordner font-awesome/scss in Ihren Ordner/bootstrap
  3. Öffnen Sie Ihren 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";

  4. Beachten Sie, dass Sie auch die Schriftartdatei von font-awesome/fonts nach dist/fonts oder in einen anderen öffentlichen Ordner kopieren müssen, der im vorherigen Schritt mit $fa-font-path festgelegt wurde

  5. Führen Sie: npm run dist aus, um 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 Ordner octicons in Ihren Ordner /bootstrap
  3. Öffnen Sie Ihren SCSS /bootstrap/bootstrap.scss und notieren Sie den folgenden SCSS-Code am Ende dieser Datei:

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

  4. Beachten Sie, dass Sie auch die Schriftartdatei von font-awesome/fonts nach dist/fonts oder in einen anderen öffentlichen Ordner kopieren müssen, der im vorherigen Schritt mit $fa-font-path festgelegt wurde

  5. Führen Sie: npm run dist aus, 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 Ersteller hat sie für Bootstrap kostenlos zur Verfügung gestellt. Als Dankeschön bitten wir Sie nur, einen Link zu Glyphicons beizufügen, wann immer dies möglich ist.

Soweit ich weiß, können Sie diese 250 Glyphen kostenlos nur für Bootstrap verwenden, jedoch nicht ausschließlich 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 Ordner bootstrap/scss
  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. Führen Sie: npm run dist aus, um Ihren Code mit Glyphicons neu zu kompilieren

Beachten Sie, dass Bootstrap 4 zum Kompilieren das Post-CSS Autoprefixer benötigt. Wenn Sie einen statischen Sass-Compiler zum Kompilieren Ihres CSS verwenden, sollten Sie anschließend den Autoprefixer ausführen.

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

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

Mit den oben genannten Schritten wird Ihr gesamter CSS-Code einschließlich in eine einzige Datei kompiliert, 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 zu schnell sein kann. Beide Schriften auf CDN enthalten auch die Schriftdateien (unter Verwendung von Daten-Uri, 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 unterstützten Browsern.

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

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

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

236
Bass Jobsen

Die Migration von Glyphicons zu Font Awesome ist ganz einfach.

Fügen Sie einen Verweis auf Font Awesome ein (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 und Ersetzung durch, in der Sie nach glyphicon glyphicon- suchen, 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.

225
Fred

Die Datei glyphicons.less aus 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 für Sie erledigt , es als glyphicons.css gespeichert und in Ihre HTML-Dateien aufgenommen.

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

Sie benötigen auch die Glyphicon-Schriftarten, die sich im Paket Bootstrap 3 befinden. Platzieren Sie sie in einem/fonts/-Verzeichnis.

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

30
Fred

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";}

Überblick:

Ich verwende bootstrap 4 ohne Glyphicons. Ich habe ein Problem mit bootstrap Baumansicht gefunden, das von Glyphicons abhängt. Ich verwende treeview so wie es ist und ich verwende scss @extend, um die Klassenstile für Symbole in großartige Klassenstile für Schriften zu übersetzen. Ich finde das ziemlich schlau (wenn du mich fragst)!

Einzelheiten:

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

Zuvor habe ich mich entschieden, font-awesome zu verwenden, und zwar aus keinem besseren Grund als in der Vergangenheit.

Als ich bootstrap Treeview ausprobierte, stellte ich fest, dass die Symbole fehlten, weil 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;
  }
}
2

Für Benutzer, die nach Einzeilerlösungen suchen, können Sie nur Bootstrap Glyphicons importieren:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
1
Rahul Gurung

Wenn Sie Laravel 5.6 verwenden, wird es mit Bootstrap geliefert. 4. Sie müssen lediglich:

npm install and npm install open-iconic --save

Ändern Sie bei /resources/assets/sass/app.scss die Zeile des Google-Schriftartenimports in Zeile 2 in

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

Alles was Sie jetzt tun müssen, ist

npm run watch

und einschließen

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

oben auf der Master Blade-Datei und auf <script src="{{asset('js/app.js')}}"></script>, bevor das Body-Tag geschlossen wird. Sie erhalten Bootstrap 4 und ein Symbol.

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

Weitere Informationen zu Symbolen finden Sie hier: Open Iconic: Empfohlen von Bootstrap 4

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

Hoffe das hilft. Viel Spaß beim Ausprobieren.

1
Ershad Ahamed