wake-up-neo.net

Fügen Sie alle Glyphicons zu Bootstrap 3 hinzu

Ich stelle mir die Glyphicons in Bootstrap 3 vor, aber es sieht so aus, als wären sie nicht alle da! Ich würde wirklich gerne das Gebäude-Symbol verwenden, aber Googling ist nicht viel aufgetaucht.

Kann jemand die fehlenden Glyphicons zu Bootstrap 3 hinzufügen?

20
lowe0292

Sie können Ihre eigene benutzerdefinierte Schriftart mit dem kostenlosen Dienst erstellen: http://fontello.com/

Ziehen Sie einfach Ihre glyphicons-halflings-regular.svg-Datei hinein, wählen Sie die gewünschten Symbole aus und laden Sie eine benutzerdefinierte Schriftart herunter, die nur die benötigte enthält.

Fontello wird mit folgenden Bibliotheken vorinstalliert:

  • Fontelico
  • Schrift fantastisch
  • Entypo
  • Typicons
  • Ikonisch
  • Moderne Piktogramme
  • Meteocons
  • MFG Labs
  • Maki
  • Zocial
  • Brandico
  • Schwer fassbar
  • Linecons
  • Web-Symbole

Sie können die Vollversion von Glyphicons für $ 59 auch unter http://glyphicons.com/ kaufen.

19
Mike Causer

Ich wollte das Glyphicons Pro verwenden, das ich gekauft hatte, aber das aktuelle Halflings-Zeug in Bootstrap zu erweitern, war unordentlich. Also habe ich für jedes Icon-Set eine eigene CSS-Datei erstellt (full, filetypes & social) und kopierte die Art und Weise, wie Bootstrap sie initialisiert, sodass ich eine ähnliche Syntax verwenden konnte.

<span class="glyphpro glyphpro-download"></span>
<span class="glyphfiles glyphfiles-xml"></span>
<span class="glyphsocial glyphsocial-github"></span>

Auf diese Weise können Sie nur diejenigen laden, die Sie möchten und wann Sie möchten, und Sie können die Vanilla-Bootstrap-Konfiguration verwenden. Hier finden Sie meine Dateien: Gist @ GitHub

13
Jelby-John

Ich habe das vollständige Gylphicons-Set von http://glyphicons.com/ gekauft und wollte alle verfügbaren Icons verwenden. Wenn Sie weniger verwenden, müssen Sie möglicherweise etwas anderes tun, was ich nicht weiß. 

Was ich getan und für mich gearbeitet habe, nachdem ich verschiedene Dinge aus diesem Thread und anderen im Stackexchange-Netzwerk ausprobiert hatte, ist folgendes:

(1) Meine ursprüngliche bootstrap.css-Datei gesichert (ich habe meine geändert, plus gute Idee)

(2) Alle regulären Glyphicons-Fontdateien aus dem Verzeichnis/web/html_css/fonts in das Verzeichnis fonts kopiert, in dem sich meine Bootstrap-Fontdateien befinden

(3) Beginnen Sie in Zeile 263ish von bootstrap.css, um die Änderung wie folgt wiederzugeben: (Ihre kann etwas anders sein)

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-regular.eot');
  src: url('../fonts/glyphicons-regular.eot?#iefix') 
  format('embedded-opentype'), url('../fonts/glyphicons-regular.woff') 
  format('woff'), url('../fonts/glyphicons-regular.ttf') 
  format('truetype'), url('../fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');
}

Sie sollten auf die neuen Fontdateien verweisen.

(4) Wenn Sie alle Glyphen wie ich haben möchten, öffnen Sie die Datei im Verzeichnis/web/html_css/css/mit der Bezeichnung glyphicons.css und kopieren Sie alle css für die Glyphicons mit Ausnahme des Teils mit @ font-face {}. und das .glyphicon {} und fügen Sie es in ein leeres Textdokument ein.

(5) Sie müssen suchen und ersetzen (ich habe es trotzdem getan) für .glyphicons, achten Sie auf die am Ende stehenden Punkte und ersetzen Sie am Ende mit .glyphicon no (s)

(6) Öffnen Sie als Nächstes die Datei bootstrap.css und kommentieren oder entfernen Sie alle anderen .glyphicon-Stile und fügen Sie sie in Ihre neuen Stile ein.

(7) Möglicherweise müssen Sie die Zeile ganz unten in der Datei entfernen, die auf die Datei bootstrap.css.map verweist. Ich musste es nicht, aber Sie müssen möglicherweise.

(8) Glückliches Glyphen! 

NOTE Sie sollten jetzt so eingestellt sein, dass Sie jetzt alle Glyphicons verwenden. Denken Sie jedoch daran, dass einige der Namen der Glyphicons sich von der ursprünglichen Bootstrap-Datei unterscheiden. 

Ich habe ein Repository für die modifizierte CSS-Datei erstellt: https://github.com/snowballrandom/bootstrap

0
toystory