wake-up-neo.net

Wie man Glyphicons einbindet, ohne Bootstrap-CSS zu verwenden

Mein Client-Projekt unter Verwendung einiger grundlegender HTML- und CSS-Funktionen. Aber sie mögen die Glyphicons in den Menüs der Website. Also habe ich gerade versucht, Glyphicons in das Bootstrap-CSS einzubinden, aber die anderen CSS wurden davon betroffen, nachdem das Bootstrap-CSS hinzugefügt wurde. 

Die Frage mag also dumm sein, ich möchte nur Glyphicons in die Menü-Links der Client-Website ohne Bootstrap-CSS einbinden. 

Ist das zuerst möglich? Ich weiß, dass Glyphicons free mit Bootstrap Package verfügbar ist. 

Und andere Dinge ist, dass mein Client nicht möchte, dass ich Bootstrap-CSS einbezieht, da dies die Seitenstruktur beeinflusst. 

Ist es also möglich, Glyphicons ohne Bootstrap-CSS oder meine eigene benutzerdefinierte CSS einzubinden?

Jede Hilfe wäre dankbar!

16
Raja

Hier ist ein Bower-Paket, das nur Glyphicons aus dem gesamten Bootstrap verwendet werden kann. 

Überprüfen Sie dieses github-Repository https://github.com/ohpyupi/glyphicons-only-bootstrap

oder

bower install glyphicons-only-bootstrap

EDIT

Jetzt ist es möglich, das Paket über NPM herunterzuladen.

npm install glyphicons-only-bootstrap
6
supergentle

Ich habe versucht, die Glyphicons von Bootstrap zum Laufen zu bringen, ohne die gesamte Datei bootstrap.css zu installieren, aber auf halbem Weg wurde es zu viel Arbeit und ich gab auf. Stattdessen bin ich auf Font Awesome gestoßen. Bootstrap 3 verwendet es selbst (oder verwendet es). Es ist als Standalone-Gerät konzipiert und daher sehr einfach und leicht. Alles was du tun musst, ist:

  1. Download Font Awesome Paket;

  2. Kopieren Sie font-awesome.min.css in Ihren CSS-Ordner und alle Zeichensatzdateien aus dem Schriftartenordner von Font Awesome in Ihren Schriftartenordner.

  3. Fügen Sie <link rel="stylesheet" href="path/to/css/font-awesome.min.css"> in den <head>des HTML-Codes ein.

  4. Wählen Sie Symbole aus der Symbolbibliothek aus und fügen Sie sie in Ihre App ein, genau wie bei den Glyphicons von Bootstrap.

12
Arthur Tarasov

Es gibt folgendes:

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

Wenn Sie jedoch etwas Bandbreite sparen möchten, können Sie die Zeichensätze direkt von einem CDN laden und dann das erforderliche CSS wie folgt einfügen:

<style>
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
  src: url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
       url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font: normal normal 16px/1 'Glyphicons Halflings';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin-right: 4px;
}
/* Add icons you will be using below */
.glyphicon-fire:before {
  content: '\e104';
}
.glyphicon-eye-open:before {
  content: '\e105';
}
</style>

Ein Beispiel finden Sie in der demo hier (Menüpunkte "Medusaauge" und "Feuerregen").

9
thdoan

Ja, Sie müssen nur von dieser Seite herunterladen: http://glyphicons.com/ (kostenlose Option unten)

EDIT: In diesem Thread finden Sie weitere Informationen dazu: Bootstrap 3 Glyphicons CDN

1

zum Glyphicons-Cheatsheet [ https://glyphicons.bootstrapcheatsheets.com/]

li:before {
font-family: "Glyphicons Halflings";
content: "\e013";
/* other code as per need*/
}
0
Naved Khan

Ich hatte das gleiche Problem mit Bootstraps, ich brauche nur einen Pfeil, aber verwirren ihn, wenn er hinzugefügt wird.

Also zog ich zu FontAwesome um und arbeitete wunderbar!

Sie können auch das CDN erhalten, das folgendermaßen aussieht:

<script src="https://use.fontawesome.com/2734t3et304.js"></script>

Sie müssen sich selbst besorgen! :)

0
George