Frage Bootstrap 3 Glyphicons CDN


PASST AUF!

Die Bootstrap-Symbole sind zurück nach Diese Pull-Anforderung wird zusammengeführt.


Nachdem ich in den letzten Wochen immer wieder hin und her gegangen bin, habe ich mich dazu entschieden Stellen Sie die Glyphicons-Symbolschrift im Haupt-Repo wieder her. Angesichts der vorherrschenden Symbole in den Benutzeroberflächen ist es für die meisten Leute wahrscheinlich ein Nachteil, sie (oder eine andere Symbolschriftart) nicht an derselben Stelle wie CSS und JS einzubinden.

Mit diesem Update kommt 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 die neuesten Glyphicons (40 neue Icons hinzufügen)
  • Entfernt die alte Glyphicons erwähnen von der CSS-Seite

Wir werden in Zukunft daran arbeiten, die Anpassung von Icon-Fonts zu verbessern, so dass das Auswechseln von Font-Bibliotheken einfacher sein kann (was die ganze Motivation für das ursprüngliche Entfernen war).


Welches ist die CDN-URL der neuen Version von Twitter Bootstrap Glyphicons?

Aus dem Bootstrap 3 Sie wurden in ein separates Repository verschoben, aber ich habe kein 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, macht es einfacher für Benutzer, Icon-Bibliotheken zu tauschen, und macht Glyphicons-Icon-Schriften für mehr Leute außerhalb von Bootstrap verfügbar.

Auf der offizielle Website Sie enthalten keine CDN-URL für Symbole.

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


76
2017-08-14 03:45


Ursprung


Antworten:


Mit den letzten Freigabe des Bootstrap 3und die Glyphicons werden zurück zum Haupt-Bootstrap Repo zusammengeführt, Bootstrap CDN dient jetzt das komplette Bootstrap 3.0 css inklusive Glyphicons. Die Bootstrap-CSS-Referenz ist alles, was Sie zum Einschließen benötigen: Glyphicons und seine Abhängigkeiten befinden sich in relativen Pfaden auf der CDN-Site und sind in referenziert bootstrap.min.css.

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 Arbeit Demo.

Hinweis das musst du benutzen .glyphicon Klassen statt .icon:

Beispiel:

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

Beachten Sie auch dass Sie noch hinzufügen müssten bootstrap.min.js zur Verwendung von Bootstrap-JavaScript-Komponenten, siehe Bootstrap CDN für die URL


Wenn Sie die Glyphicons getrennt verwenden möchtenSie können das tun, indem Sie direkt auf die Glyphicons css verweisen Bootstrap CDN.

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

Seit der css Datei enthält bereits alle benötigten Glyphicons-Abhängigkeiten (die sich in einem relativen Pfad auf der Bootstrap-CDN-Site befinden) und fügt das hinzu css Datei ist alles, was man tun kann, um mit Glyphicons zu beginnen.

Hier ist eine Arbeit Demo der Glyphicons ohne Bootstrap.


131
2017-08-14 07:17



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

Darunter Font-Awesome

Öffnen 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 (beachten Sie, die Version wird sich ändern):

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

Verwendung:

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

Es beinhaltet viele Symbole!


27
2017-08-14 03:54



Obwohl Bootstrap-CDN Glyphicons in bootstrap.min.css wiederhergestellt hat, enthalten die Bootswatch-CSS-Dateien des Bootstrap-CDN keine Glyphicons.

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

Standard Amelia hat Glyphicons in dieser Datei: http://bootswatch.com/amelia/bootstrap.min.css 

Die CSS-Datei des Bootstrap CDN enthält jedoch keine Glyphicons: http://netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css

So wie @edsioufi erwähnt, sollten Sie einschließen, sollten Sie glphicons css einschließen, wenn Sie Bootswatch-Dateien vom Bootstrap CDN verwenden. Datei: http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css


2
2017-09-17 18:40