Wie kann ich Bootstrap-Glyphicons unabhängig von Bootstrap verwenden?

Twitter Bootstrap Glyphicons CDN kehrt zurück

Nach einem kürzlich erfolgten Merger-Pull-Request wurde die bekannte Glyphicons-Symbolschriftart von Bootstrap wieder in das Haupt-Repository integriert. Dadurch wird ein grundlegendes Element des Benutzeroberflächendesigns wiederhergestellt, da Symbole eine wichtige Rolle bei der Navigation und dem Verständnis der Benutzeroberfläche spielen.

CDN-URL für Bootstrap-Glyphicons

Das Bootstrap 3.0 CDN jetzt hostet das komplette Bootstrap 3.0 CSS, einschließlich der Glyphicons. In HTML können Sie Glyphicons mit dieser Referenz einbinden:

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

Für CSS verwenden Sie diese Importanweisung:

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

Glyphicons unabhängig verwenden

Für Projekte, die nicht das gesamte Bootstrap-Framework nutzen, können die Glyphicons separat über den Bootstrap referenziert werden 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");

Zusätzliche Überlegungen

Bei separater Verwendung von Glyphicons Stellen Sie von Bootstrap aus sicher, dass die erforderlichen Abhängigkeiten im relativen Pfad des Bootstrap-CDN enthalten sind. Beachten Sie außerdem, dass .glyphicon-Klassen .icon-Klassen ersetzt haben.

Verwendungsbeispiel

Um das Herzsymbol zu verwenden, ersetzen Sie .icon-heart durch .glyphicon-heart:

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

Denken Sie bei der Integration von JavaScript-Komponenten daran, bootstrap.min.js separat einzuschließen.

Das obige ist der detaillierte Inhalt vonWie kann ich Bootstrap-Glyphicons unabhängig von Bootstrap verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!