Wie Glyphicons ohne Verwendung von Bootstrap-CSS

Meine Client-Projekt mit ein paar grundlegende HTML-und CSS-Dateien. Aber Sie mögen die Glyphicons auf der Website-Menüs. Also ich habe gerade versucht zu zählen Glyphicons mit dem Bootstrap-CSS, tut es, aber die anderen css bekommen betroffen, nach einschließlich der Bootstrap-CSS.

Also die Frage mag albern sein, ich will nur gehören die Glyphicons im client-website im Menü links ohne bootstrap css.

Ist das möglich? Ich weiß Glyphicons frei verfügbar sein wird mit Bootstrap-Package.

Und andere Dinge ist, dass mein Kunde nicht wollen, mich zu enthalten Bootstrap-CSS, da es Auswirkungen auf die Seitenstruktur.

So ist es möglich, Glyphicons, ohne Bootstrap css oder meine eigene benutzerdefinierte css?

Jede mögliche Hilfe würde geschätzt!

Alternative; Font Awesone
Sie kaufen die PRO-version, wenn Sie es verwenden möchten, ohne bootstrap.
Definitiv wechseln Sie zu fontawesome.io
Soweit ich das verstanden habe, mit Glyphicons ohne Bootstrap ist eine Urheberrechtsverletzung. Bitte tun Sie das nicht, nutzen einen Kostenlose alternative wie Font Awesome statt. "Glyphicons Halblinge sind normalerweise nicht frei verfügbar, aber Ihre Schöpfer Sie gemacht hat zur Verfügung für die Bootstrap-kostenlos. Als Dankeschön, wir bitten nur, dass Sie einen link zurück zu Glyphicons, Wann immer möglich." - getbootstrap.com/components/#glyphicons
Deine Frage ist nicht dumm; das, was so viele devs lassen Bootstrap verheerend auf standard-CSS ist was dummes! Es gibt eine Bibliothek, die ich verwenden möchten, erfordert Glyphicons, aber ich möchte nicht das Bootstrap-meine CSS-FUBAR. Es wäre besser, die Bootstrap-nur getreten, auf Elemente mit einer bestimmten Klasse und deren Nachkommen, und ich verstehe nicht, warum dies nicht der Bootstrap funktioniert. (Fügen Sie einfach die Klasse, um Ihre <html> element, wenn Sie wirklich wollen, es zu nehmen, über alles!) Vielleicht bin ich auch nur alt—ich habe mit CSS für 20 Jahre, und während ich gehalten habe, bis ich nur noch erwarten, mit CSS3 zu arbeiten, in einer bestimmten Weise.

InformationsquelleAutor Raja | 2016-05-25

6

Hier ist ein bower-Paket, das Sie verwenden können, nur glyphicons aus der gesamten bootstrap.

Überprüfen Sie in diesem github-repository https://github.com/ohpyupi/glyphicons-only-bootstrap

oder
```
bower install glyphicons-only-bootstrap
```
BEARBEITEN

Es ist nun möglich, laden Sie das Paket durch NPM.
```
npm install glyphicons-only-bootstrap
```
Da hab ich auch schon Links eine Garantie Kommentar heute (siehe oben): Menschen, die downvote Antworten, ohne einen Kommentar zu erklären, warum das verboten sein sollte, von Stack Exchange! Was passiert, wenn Sie versucht, diesen Ratschlägen zu Folgen? Oder haben Sie ignorant oder kaltblütig downvote, weil Sie nicht verwenden Bower?
Es gibt viele Menschen täuschen, indem etwas nur wegen seiner fanciness und wie viel es ist anspruchsvoll. Ich Stimme völlig mit Ihnen überein. Es ist immer schwierig, zu Fragen, ein Fragen und lassen Sie die Antwort in stackover-flow. Ich bin nur froh, dass rund 400 Leute zu Besuch sind die repo-pro zwei Wochen und bekommen, was Sie wollen für die tägliche Entwicklung.

InformationsquelleAutor supergentle
12

Ich habe versucht, Bootstrap ist glyphicons funktionieren ohne Installation der ganzen bootstrap.css-Datei, aber auf halbem Weg durch wurde es zu viel Arbeit, und ich gab auf. Stattdessen stieß ich auf Font Awesome. Bootstrap 3 verwendet (oder verwendet haben). Es ist entworfen, um als eine eigenständige, also es ist wirklich einfach und leicht. Alles, was Sie tun müssen, ist:
1. Download Font-Awesome-Paket;
2. Kopieren font-awesome.min.css in Ihren css-Ordner und alle Schriftarten-Dateien von Font Awesome Schriftarten-Ordner in Ihrem Ordner "Schriftarten";
3. Gehören <link href="path/to/css/font-awesome.min.css"> im <head>Ihrer HTML;
4. Wählen Sie Symbole aus der Symbol-Bibliothek und setzen Sie Sie in Ihre app wie Bootstrap ist glyphicons.
Danke das hat mir sehr geholfen!
Vielleicht bin ich mising etwas, aber ich sehe nicht, wie das funktionieren kann. FontAwesome verwendet verschiedene Klassen, so dass, wenn Sie eine Bibliothek benutzen, die erwartet, dass GlyphIcon-Klassen, z.B. <i class="glyphicon glyphicon-chevron-up"></i>, wird nichts angezeigt. Ich mag mit FontAwesome, sondern unfortuantely, ist die third-party-Bibliothek, die ich verwenden möchten, erwartet GlyphIcons, auch die nicht-Bootstrap-version. (Vielleicht ist dies ein versehen der Autor der Bibliothek, aber ich versuche, das zu umgehen.)

InformationsquelleAutor Arthur Tarasov

Gibt es diese:

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

Jedoch, wenn Sie möchten sparen einige Bandbreite, Sie können das laden der fonts direkt aus einem CDN und dann inline die gewünschte CSS, wie hier:

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

Sehen Sie ein Beispiel in der demo hier ("Auge der Medusa" und "Rain of Fire" Menüpunkte).

Zu downvoter: bitte geben Sie konstruktives feedback, ob diese Lösung nicht für Sie arbeiten.
Es war nicht ich, wer downvoted Sie, und ich hasse Leute, die downvote ohne Grund, auch die Website selbst sagt, um einen Kommentar zu hinterlassen! Aber Ihre CDN-link noch stopft up-standard-CSS (auch wenn es behauptet, zu 'normalisieren'), so hat es im wesentlichen das gleiche problem, dass Bootstrap nicht, und somit nicht wirklich zu beantworten die Frage. Jedoch die explizite CSS, die Sie hier gepostet haben nicht das problem, die ist letztendlich, warum ich bis abgewählt deine Antwort—danke! Ich bin nicht einverstanden, dass es spart Bandbreite, aber. Der springende Punkt, der die CDNs für Browser-cache, Bibliotheken, und nehmen Sie die Last von Ihrem web-server.
danke für den Kommentar. Dies war eine ganze Weile her, aber ich denke, wenn ich sagte: "sparen Sie einige Bandbreite" habe ich gemeint, anstatt das herunterladen der gesamten Bootstrap-Bibliothek, die nur das Symbol zu verwenden Schriftarten, Sie können nur link-direkt zu den Schriften.

InformationsquelleAutor thdoan

1

Ja, Sie benötigen nur den download von dieser Seite: http://glyphicons.com/ (Kostenlose option unten)

BEARBEITEN:
In diesem thread mehr Infos dazu: Bootstrap 3 Glyphicons CDN

Ja. Aber die Kostenlose version nicht die css-option, nur im png-Format zur Verfügung. Für CSS-version wieder, ich muss gehen, Pro-version oder Bootstrap. Danke.
Und ist es nicht möglich, die css und font-Dateien von bootstrap und nur diese? Ich bin mir nicht sicher über die Machbarkeit dieses, aber ist eine Idee. Oder Sie können versuchen, zu verwenden Font Awesome wie hat sayed, um Sie HdddnTHA

InformationsquelleAutor Alejandro Garrido
0

Ich hatte das gleiche problem mit Bootstraps, brauche ich nur einen Pfeil, aber es Durcheinander, wenn Hinzugefügt.

Also zog ich nach FontAwesome, hat wunderbar funktioniert!

Können Sie auch die CDN, die wie folgt aussieht:
```
<script src="https://use.fontawesome.com/2734t3et304.js"></script>
```
Sie brauchen, um Ihre eigenen! 🙂

Dies ist effektiv die gleiche Antwort wie Arthur ' s oben. stackoverflow.com/a/39436226/1450294 vielen Dank für Ihren Rat, aber bitte Lesen Sie meinen Kommentar gibt, warum ich glaube nicht, dass es hilfreich ist. (Ich werde nicht downvote Sie und nehmen Ihr einen Ruf-Punkt. Ich ermutige Sie, Lesen Sie die anderen Antworten vor dem schreiben Ihrer eigenen, aber, und machen Sie sich mit StackExchange Zoll.)

InformationsquelleAutor George
0

gehen, um glyphicons cheatsheet [https://glyphicons.bootstrapcheatsheets.com/%5D
```
li:before {
font-family: "Glyphicons Halflings";
content: "\e013";
/* other code as per need*/
}
```
InformationsquelleAutor Naved Khan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.