wake-up-neo.net

Bootstrap 3 Glyphicons CDN

PASST AUF!

Die Bootstrap Icons sind wieder da nach diese Pull Request Merge .


Nachdem ich in den letzten Wochen hin und her gegangen bin, habe ich beschlossen, die Glyphicons-Symbolschrift auf dem Hauptrepo wiederherzustellen. Angesichts der Tatsache, wie häufig Symbole in Benutzeroberflächen verwendet werden, ist es für die meisten Leute wahrscheinlich ein Nachteil, sie (oder eine andere Symbolschriftart) nicht an derselben Stelle wie CSS und JS einzufügen.

Mit diesem Update erhalten Sie Folgendes:

  • Stellt die Dokumentation wieder her (auf der Seite Komponenten)
  • Neue Variablen, @icon-font-path und @icon-font-name für Flexibilität beim Hinzufügen und Entfernen von Symbolschriften
  • Upgrades auf neueste Glyphicons (Hinzufügen von 40 neuen Symbolen)
  • Entfernt die alte Glyphicons Erwähnung von der CSS Seite

Wir werden in Zukunft daran arbeiten, die Anpassung von Symbolschriften zu verbessern, damit das Austauschen von Schriftbibliotheken einfacher wird (was die ganze Motivation für das ursprüngliche Entfernen war).


Wie lautet die CDN-URL der neuen Version von Twitter Bootstrap Glyphicons?

Aus Bootstrap 3 sie wurden in ein separates Repository verschoben , aber ich habe keine CDN gefunden.

Aus der offiziellen Dokumentation:

Mit dem Start von Bootstrap 3 wurden Symbole in ein separates Repository verschoben. Dies hält das primäre Projekt so schlank wie möglich, erleichtert den Leuten das Austauschen von Symbolbibliotheken und macht Glyphicons-Symbolschriftarten mehr Menschen außerhalb von Bootstrap zur Verfügung.

Auf der offiziellen Website gibt es keine CDN-URL für Symbole.

Wo kann man es finden? Ich möchte das Repository nicht herunterladen und in mein Projekt aufnehmen.

79
Ionică Bizău

Mit dem letzten Release von bootstrap und den Glyphicons, die wieder zum Haupt-Repository zusammengeführt werden Bootstrap= repo, Bootstrap CDN dient jetzt der vollständigen Bootstrap 3.0 CSS einschließlich Glyphicons . Die Bootstrap Eine CSS-Referenz ist alles, was Sie einschließen müssen: Glyphicons und ihre Abhängigkeiten beziehen sich auf relative Pfade auf der CDN-Site und werden in bootstrap.min.css referenziert.

In html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

In CSS:

 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

Hier ist eine funktionierende Demo.

Beachten Sie , dass Sie .glyphicon Klassen anstelle von .icon verwenden müssen:

Beispiel:

<span class="glyphicon glyphicon-heart"></span>

Beachten Sie auch , dass Sie bootstrap.min.js für die Verwendung von Bootstrap= JavaScript-Komponenten, Siehe Bootstrap CDN für URL.


Wenn Sie die Glyphicons separat verwenden möchten , können Sie dies tun, indem Sie direkt auf das Glyphicons-CSS in Bootstrap CDN verweisen.

In html:

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

In CSS:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

Da die css -Datei bereits alle erforderlichen Glyphicons-Abhängigkeiten enthält (die sich in einem relativen Pfad auf der Bootstrap CDN-Site) befinden), ist das Hinzufügen der css -Datei alles Es ist zu tun, um Glyphicons zu verwenden.

Hier ist eine funktionierende Demo der Glyphicons ohne Bootstrap.

138
edsioufi

Eine Alternative wäre, Font-Awesome für Symbole zu verwenden:

Einschließlich Font-Awesome

Öffne Font-Awesome auf CDNJS und kopiere die CSS-URL der neuesten Version:

<link rel="stylesheet" href="<url>">

Oder in CSS

@import url("<url>");

Zum Beispiel (Anmerkung, die Version wird sich ändern):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Verwendungszweck:

<i class="fa fa-bed"></i>

Es enthält viele Icons !

27
Ionică Bizău

Obwohl Bootstrap CDN Glyphicons in bootstrap.min.css wiederhergestellt hat, enthält Bootstrap CDNs Bootswatch-CSS-Dateien keine Glyphicons.

Zum Beispiel Amelia Theme: http://bootswatch.com/amelia/

Standardmäßig enthält Amelia Glyphicons in dieser Datei: http://bootswatch.com/amelia/bootstrap.min.css

Aber Bootstrap CDNs CSS-Datei enthält keine Glyphen: http://netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css

Wie @edsioufi bereits erwähnt hat, sollten Sie glphicons css einschließen, wenn Sie Bootswatch-Dateien aus der bootstrap= CDN verwenden. Datei: http://netdna.bootstrapcdn.com/ bootstrap/3.0.0/css/bootstrap-glyphicons.css

2
trante