Bootstrap 3 Glyphicons CDN

82

PASST AUF!

Die Bootstrap-Symbole sind nach dieser Zusammenführung der Pull-Anforderung wieder verfügbar .

Nachdem ich in den letzten Wochen hin und her gegangen bin, habe ich beschlossen , die Glyphicons-Symbolschrift im Haupt-Repo wiederherzustellen . Angesichts der Häufigkeit von Symbolen in Benutzeroberflächen ist es für die meisten Benutzer wahrscheinlich ein schlechter Dienst, sie (oder eine andere Symbolschriftart) nicht an derselben Stelle wie CSS und JS einzufügen.

Mit diesem Update kommt folgendes:

  • Stellt die Dokumentation wieder her (auf der Seite Komponenten)
  • Neue Variablen @icon-font-pathund @icon-font-namefür mehr Flexibilität beim Hinzufügen und Entfernen von Symbolschriftarten
  • Upgrades auf die neuesten 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 Symbolschriftarten zu verbessern, damit das Austauschen von Schriftartenbibliotheken einfacher wird (was die ganze Motivation für die ursprüngliche Entfernung war).

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

Vom Bootstrap 3 wurden sie 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, erleichtert den Benutzern das Austauschen von Symbolbibliotheken und macht Glyphicons-Symbolschriftarten für mehr Personen außerhalb von Bootstrap leichter verfügbar.

Auf der offiziellen Website wird keine CDN-URL für Symbole bereitgestellt.

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

html css twitter-bootstrap cdn twitter-bootstrap-3 Ionică Bizău
quelle
1
Die CSS-Dateien des Boostrap CDN-Bootswatch-Themas enthalten keine Glyphicons. Stimmt das? Datei: netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/…
trante

Antworten:

153

Mit der jüngsten Version von Bootstrap 3 und dem Zusammenführen der Glyphicons zum Haupt-Bootstrap-Repo stellt Bootstrap CDN nun das gesamte Bootstrap 3.0-CSS einschließlich Glyphicons bereit . Die Bootstrap-CSS-Referenz ist alles, was Sie einschließen müssen: Glyphicons und ihre Abhängigkeiten befinden sich auf relativen Pfaden auf der CDN-Site und werden 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 funktionierende Demo .

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

Beispiel:

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

Beachten Sie auch, dass Sie bootstrap.min.jsfür die Verwendung von Bootstrap-JavaScript-Komponenten weiterhin einschließen müssen . Die URL finden Sie unter Bootstrap-CDN .

Wenn Sie die Glyphicons separat verwenden möchten , können Sie dies tun, indem Sie direkt auf das Glyphicons-CSS auf 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 cssDatei bereits alle erforderlichen Glyphicons-Abhängigkeiten enthält (die sich in einem relativen Pfad auf der Bootstrap-CDN-Site befinden), cssmüssen Sie lediglich die Datei hinzufügen , um Glyphicons zu verwenden.

Hier ist eine funktionierende Demo der Glyphicons ohne Bootstrap.

edsioufi
quelle
Hmm, interessant. Scheint die richtige Antwort zu sein, aber die Symbole werden beim Wechsel zu dieser URL nicht angezeigt. Font awesome funktioniert gut. Die CSS-Datei mit den Symbolregeln wird geladen. Benötige ich noch etwas Bilder?
Ionică Bizău
@John ツ Die erste Klasse in der CSS-Datei ist eine @ font-face-Klasse, die alle erforderlichen Schriftdateien (einschließlich einer svgBilddatei) importiert , die sich in einem relativen Pfad auf der Bootstrap-CDN- Site befinden. Sie brauchen also nichts mehr.
Edsioufi
Danke für die Demo. Ich werde später einen Blick darauf werfen und diese Antwort akzeptieren, sobald meine Bewerbung funktioniert. Bitte bearbeiten Sie Ihre Antwort und fügen Sie den Inhalt aus den Kommentaren zur ID hinzu. Vielen Dank!
Ionică Bizău
1
Ich danke dir sehr. Ich habe gerade gesehen, dass .icondas nicht mehr benutzt wird.
Ionică Bizău
und verwenden Sie keine Schriftarten aus der angepassten Version, bis dieses Problem behoben ist: github.com/twbs/bootstrap/issues/9925
OZ_
27

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

Einschließlich Font-Awesome

Öffnen Sie Font-Awesome auf CDNJS und kopieren Sie die CSS-URL der neuesten Version:

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

Oder in CSS

@import url("<url>");

Zum Beispiel (Hinweis, 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 enthält viele Symbole !

Ionică Bizău
quelle
Nachdem ich stundenlang versucht hatte, die Symbole zum Laufen zu bringen, löste das Verknüpfen mit der font-fantastischen CD mein Problem. Vielen Dank.
Unbesiegbar
@Eenvincible Vergessen Sie nicht, die neueste Version zu verwenden . Die Links aus meiner Antwort sind etwas veraltet.
Ionică Bizău
Die URL wurde geändert:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Nimrod
Und die font-awesome-Datei enthält viel mehr Symbole. Nett.
Dudewad
Wenn Sie die Glyphicons des Bootstraps nicht einbeziehen, sondern sich stattdessen auf fa verlassen, treten Probleme für Bibliotheken auf, die vom Bootstrap abhängen. ZB Angular-ui-select wird einige Symbole vermissen
Robin-Hoodie
3

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

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

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

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

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

trante
quelle
Außerdem generiert der Customizer beim Bootstrap manchmal ungültige Schriftdateien. Ein separater Download von Schriftdateien half mir, meine Symbole zurückzubekommen. Es ist manchmal ein Bootstrap-Paket-Fehler.
Clain Dsilva
trante: Ihre Angaben sind falsch. Wenn Sie Ihre Links überprüfen, werden Sie feststellen, dass das Bootstrap-CDN für die Bootwatch-Themen Glyphicons enthält.
Michael Moriarty
0

Wenn Sie nur Glyphen-Symbole ohne zusätzliches CSS haben möchten, können Sie eine CSS-Datei erstellen und den folgenden Code einfügen und in die CSS-Hauptdatei aufnehmen.

Ich muss diese zusätzliche Datei erstellen, da der unten stehende Link auch mit meinen Site-Stilen zu tun hat.

//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

Anstatt es direkt zu verwenden, habe ich eine CSS-Datei erstellt bootstrap-glyphicons.css 

@font-face{font-family:'Glyphicons Halflings';src:url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot');src:url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff') format('woff'),url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('http://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";}
Erweitern Sie das Snippet

Und die erstellte CSS-Datei in meine Haupt-CSS-Datei importiert, sodass ich nur die Glyphicons importieren kann. Ich hoffe das hilft

@import url("bootstrap-glyphicons.css");
Dipen
quelle