Wie man Glyphicons ohne Bootstrap CSS einfügt

Question

Mein Client-Projekt mit einigen grundlegenden HTML und CSS. Aber sie mögen die Glyphicons auf den Menüs der Website. Also habe ich gerade versucht, Glyphicons mit dem Bootstrap CSS zu integrieren, aber die anderen CSS wurden nach dem Einfügen des Bootstrap CSS betroffen.

Also die Frage kann albern sein, ich möchte nur Glyphicons in Client-Website Menübeziehungen ohne Bootstrap CSS aufnehmen.

Ist das zuerst möglich? Ich weiß, dass Glyphicons kostenlos mit dem Bootstrap-Paket verfügbar sein wird.

Und andere Dinge ist, dass mein Client möchte nicht Bootstrap CSS enthalten, da es die Seitenstruktur beeinflusst.

So ist es möglich, Glyphicons ohne Bootstrap CSS oder meine eigenen benutzerdefinierten CSS aufzunehmen?

Jede Hilfe wäre willkommen!

Answer 1

Hier ist ein Bower-Paket, das Sie verwenden können, Glyphicons aus dem gesamten Bootstrap.

prüfen diese Github-Repository https://github.com/ohpyupi/glyphicons-only-bootstrap

oder

bower install glyphicons-only-bootstrap 

EDIT

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

npm install glyphicons-only-bootstrap 

Answer 2

Ja, Sie brauchen nur auf dieser Seite herunterladen: http://glyphicons.com/ (Free Option unten)

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

Answer 3

ich versuchte Bootstrap des glyphicons die ganze bootstrap.css Datei zu installieren, um die Arbeit zu machen, ohne aber auf halbem Weg durch es wurde zu viel Arbeit und ich gab auf. Stattdessen stieß ich auf Font Awesome. Bootstrap 3 selbst benutzt es (oder benutzt es). Es ist so konzipiert, dass es als eigenständiges Gerät verwendet werden kann, so dass es wirklich einfach und leicht ist. Alles, was Sie tun müssen, ist:

1. Download Font Super-Paket;

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

3. Enthalten Sie <link rel="stylesheet" href="path/to/css/font-awesome.min.css"> in der Ihres HTML;

4. Wählen Sie Symbole aus der icon library und legen Sie sie in Ihre App, so wie Sie die Glyphicons von Bootstrap wären.

Answer 4

Es ist das:

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

Wenn Sie jedoch eine gewisse Bandbreite sparen möchten, können Sie die Schriftarten direkt von einem CDN laden und dann inline die erforderliche CSS, wie folgt aus:

<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> 

Sie können ein Beispiel in der demo here (Menüpunkt "Eye of Medusa" und "Regen des Feuers") sehen.

Answer 5

Ich hatte das gleiche Problem mit Bootstraps, ich brauche nur einen Pfeil, aber es versauen, wenn es hinzugefügt.

So zog ich nach FontAwesome, arbeitete wunderbar!

Sie können auch das CDN erhalten, die wie folgt aussieht:

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

Sie Ihre eigenen bekommen müssen! :)