English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Dieses Kapitel wird Schriftart-Symbole (Glyphicons) erläutern und durch einige Beispiele deren Verwendung verstehen. 200 Schriftartformate. Lassen Sie uns zunächst verstehen, was Schriftart-Symbole sind.
Schriftart-Symbole sind Schriftarten, die in Web-Projekten verwendet werden. ObwohlGlyphicons Halflings wird ein kommerzieller Lizenzbedarf, aber Sie können diese Symbole kostenlos verwenden, indem Sie Bootstrap auf Basis des Projekts verwenden.
Um unsere Wertschätzung für die Autoren der Symbole auszudrücken, hoffen wir, dass Sie den Link zur Website GLYPHICONS hinzufügen, wenn Sie sie verwenden.
Wir haben bereits Umgebung Installation Kapitel haben Bootstrap 3x Version und verstehen Sie ihre Verzeichnisstruktur. In fonts Im Ordner können Sie die Schriftart-Symbole finden, die die folgenden Dateien enthalten:
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
beachten Sie die entsprechenden CSS-Regeln dist Der Ordner 'css' im Verzeichnis bootstrap.css 和 bootstrap-min.css 文件上。
下面的 CSS 规则构成 glyphicon class。
结果如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏的字形图标</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-left: 50px;
}
</style>
<!--[if lt IE 9]>
<script src="https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-startseite/span> Startseite</a></li>
<li><a href="#shop"><span class="glyphicon glyphicon-Einkaufen-einkaufswagen/span> Shop</a></li>
<li><a href="#support"><span class="glyphicon glyphicon-headphones></span> Unterstützung</a></li>
</ul>
</div><!-- /.nav-Einklappen -->
</div><!-- /.container -->
</div>
<!-- jQuery (Bootstrap-Plugins müssen eingebunden werden) -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Enthält alle Compiler-Plugins -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>Testen Sie es heraus ‹/›Wir haben gesehen, wie man Schriftsymbole verwendet, sehen wir uns an, wie man Schriftsymbole anpasst.
Wir beginnen mit dem obigen Beispiel und passen die Symbolgröße, Farbe und den Textschatten an, um das Symbol zu gestalten.
Hier ist der Anfangscode:
<button type="button"> <span></span> Benutzer </button>
Das Ergebnis zeigt:
Durch Vergrößern oder Verkleinern der Symbolgröße können Sie das Symbol größer oder kleiner aussehen lassen.
<button type="button" style="font-Größe: 60px"> <span></span> Benutzer </button>
<button type="button" style="color: rgb(212, 106, 64);"> <span></span> Benutzer </button>
<button type="button" style="text-Schatten: schwarz 5px 3px 3px;"> <span></span> Benutzer </button>
Klicken Sie hier, um Schriftsymbole zu erstellen »
| Symbol | Klassenname | Beispiel |
|---|---|---|
| glyphicon glyphicon-asterisk | Versuchen Sie es einmal | |
| glyphicon glyphicon-Plus | Versuchen Sie es einmal | |
| glyphicon glyphicon-Minus | Versuchen Sie es einmal | |
| glyphicon glyphicon-euro | Versuchen Sie es einmal | |
| glyphicon glyphicon-Wolke | Versuchen Sie es einmal | |
| glyphicon glyphicon-umschlag | Versuchen Sie es einmal | |
| glyphicon glyphicon-stift | Versuchen Sie es einmal | |
| glyphicon glyphicon-glas | Versuchen Sie es einmal | |
| glyphicon glyphicon-musik | Versuchen Sie es einmal | |
| glyphicon glyphicon-suche | Versuchen Sie es einmal | |
| glyphicon glyphicon-Herz | Versuchen Sie es einmal | |
| glyphicon glyphicon-stern | Versuchen Sie es einmal | |
| glyphicon glyphicon-stern-Leer | Versuchen Sie es einmal | |
| glyphicon glyphicon-benutzer | Versuchen Sie es einmal | |
| glyphicon glyphicon-film | Versuchen Sie es einmal | |
| glyphicon glyphicon-th-groß | Versuchen Sie es einmal | |
| glyphicon glyphicon-th | Versuchen Sie es einmal | |
| glyphicon glyphicon-th-Liste | Versuchen Sie es einmal | |
| glyphicon glyphicon-In Ordnung | Versuchen Sie es einmal | |
| glyphicon glyphicon-Entfernen | Versuchen Sie es einmal | |
| glyphicon glyphicon-zoom-In | Versuchen Sie es einmal | |
| glyphicon glyphicon-zoom-Außen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Ausschalten | Versuchen Sie es einmal | |
| glyphicon glyphicon-signal | Versuchen Sie es einmal | |
| glyphicon glyphicon-kopf | Versuchen Sie es einmal | |
| glyphicon glyphicon-müll | Versuchen Sie es einmal | |
| glyphicon glyphicon-zu Hause | Versuchen Sie es einmal | |
| glyphicon glyphicon-datei | Versuchen Sie es einmal | |
| glyphicon glyphicon-zeit | Versuchen Sie es einmal | |
| glyphicon glyphicon-straße | Versuchen Sie es einmal | |
| glyphicon glyphicon-download-alt | Versuchen Sie es einmal | |
| glyphicon glyphicon-download | Versuchen Sie es einmal | |
| glyphicon glyphicon-upload | Versuchen Sie es einmal | |
| glyphicon glyphicon-inbox | Versuchen Sie es einmal | |
| glyphicon glyphicon-Abspielen-Kreis | Versuchen Sie es einmal | |
| glyphicon glyphicon-Wiederholen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Aktualisieren | Versuchen Sie es einmal | |
| glyphicon glyphicon-Liste-alt | Versuchen Sie es einmal | |
| glyphicon glyphicon-Schloss | Versuchen Sie es einmal | |
| glyphicon glyphicon-Flagge | Versuchen Sie es einmal | |
| glyphicon glyphicon-Kopfhörer | Versuchen Sie es einmal | |
| glyphicon glyphicon-Lautstärke-Ausschalten | Versuchen Sie es einmal | |
| glyphicon glyphicon-Lautstärke-Runter | Versuchen Sie es einmal | |
| glyphicon glyphicon-Lautstärke-Hoch | Versuchen Sie es einmal | |
| glyphicon glyphicon-QR-Code | Versuchen Sie es einmal | |
| glyphicon glyphicon-Strichcode | Versuchen Sie es einmal | |
| glyphicon glyphicon-Tag | Versuchen Sie es einmal | |
| glyphicon glyphicon-Tags | Versuchen Sie es einmal | |
| glyphicon glyphicon-Buch | Versuchen Sie es einmal | |
| glyphicon glyphicon-Lesezeichen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Drucken | Versuchen Sie es einmal | |
| glyphicon glyphicon-Kamera | Versuchen Sie es einmal | |
| glyphicon glyphicon-Schriftart | Versuchen Sie es einmal | |
| glyphicon glyphicon-Fett | Versuchen Sie es einmal | |
| glyphicon glyphicon-Kursiv | Versuchen Sie es einmal | |
| glyphicon glyphicon-Text-Höhe | Versuchen Sie es einmal | |
| glyphicon glyphicon-Text-Breite | Versuchen Sie es einmal | |
| glyphicon glyphicon-Ausrichten-Links | Versuchen Sie es einmal | |
| glyphicon glyphicon-Ausrichten-Zentriert | Versuchen Sie es einmal | |
| glyphicon glyphicon-Ausrichten-Rechts | Versuchen Sie es einmal | |
| glyphicon glyphicon-Ausrichten-Ausrichten | Versuchen Sie es einmal | |
| glyphicon glyphicon-Liste | Versuchen Sie es einmal | |
| glyphicon glyphicon-Einzugsstreifen-Links | Versuchen Sie es einmal | |
| glyphicon glyphicon-Einzugsstreifen-Rechts | Versuchen Sie es einmal | |
| glyphicon glyphicon-Facetime-Video | Versuchen Sie es einmal | |
| glyphicon glyphicon-Bild | Versuchen Sie es einmal | |
| glyphicon glyphicon-Karte-Markierer | Versuchen Sie es einmal | |
| glyphicon glyphicon-Anpassen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Tönung | Versuchen Sie es einmal | |
| glyphicon glyphicon-Bearbeiten | Versuchen Sie es einmal | |
| glyphicon glyphicon-Teilen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Überprüfen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Verschieben | Versuchen Sie es einmal | |
| glyphicon glyphicon-Schritt-Rückwärts | Versuchen Sie es einmal | |
| glyphicon glyphicon-Schnell-Rückwärts | Versuchen Sie es einmal | |
| glyphicon glyphicon-Rückwärts | Versuchen Sie es einmal | |
| glyphicon glyphicon-Abspielen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Pausieren | Versuchen Sie es einmal | |
| glyphicon glyphicon-Anhalten | Versuchen Sie es einmal | |
| glyphicon glyphicon-Vorwärts | Versuchen Sie es einmal | |
| glyphicon glyphicon-Schnell-Vorwärts | Versuchen Sie es einmal | |
| glyphicon glyphicon-Schritt-Vorwärts | Versuchen Sie es einmal | |
| glyphicon glyphicon-Auswerfen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Keil-Links | Versuchen Sie es einmal | |
| glyphicon glyphicon-Keil-Rechts | Versuchen Sie es einmal | |
| glyphicon glyphicon-Plus-Signatur | Versuchen Sie es einmal | |
| glyphicon glyphicon-Minus-Signatur | Versuchen Sie es einmal | |
| glyphicon glyphicon-Entfernen-Signatur | Versuchen Sie es einmal | |
| glyphicon glyphicon-In Ordnung-Signatur | Versuchen Sie es einmal | |
| glyphicon glyphicon-Frage-Signatur | Versuchen Sie es einmal | |
| glyphicon glyphicon-Information-Signatur | Versuchen Sie es einmal | |
| glyphicon glyphicon-Schnellschuss | Versuchen Sie es einmal | |
| glyphicon glyphicon-Entfernen-Kreis | Versuchen Sie es einmal | |
| glyphicon glyphicon-In Ordnung-Kreis | Versuchen Sie es einmal | |
| glyphicon glyphicon-Verboten-Kreis | Versuchen Sie es einmal | |
| glyphicon glyphicon-Pfeil-Links | Versuchen Sie es einmal | |
| glyphicon glyphicon-Pfeil-Rechts | Versuchen Sie es einmal | |
| glyphicon glyphicon-Pfeil-Hoch | Versuchen Sie es einmal | |
| glyphicon glyphicon-Pfeil-Runter | Versuchen Sie es einmal | |
| glyphicon glyphicon-Teilen-alt | Versuchen Sie es einmal | |
| glyphicon glyphicon-Größenänderung-Voll | Versuchen Sie es einmal | |
| glyphicon glyphicon-Größenänderung-Klein | Versuchen Sie es einmal | |
| glyphicon glyphicon-Ausrufung-Signatur | Versuchen Sie es einmal | |
| glyphicon glyphicon-Geschenk | Versuchen Sie es einmal | |
| glyphicon glyphicon-Blatt | Versuchen Sie es einmal | |
| glyphicon glyphicon-Feuer | Versuchen Sie es einmal | |
| glyphicon glyphicon-Auge-Öffnen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Auge-Schließen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Achtung-Signatur | Versuchen Sie es einmal | |
| glyphicon glyphicon-Flugzeug | Versuchen Sie es einmal | |
| glyphicon glyphicon-Kalender | Versuchen Sie es einmal | |
| glyphicon glyphicon-Zufällig | Versuchen Sie es einmal | |
| glyphicon glyphicon-Kommentar | Versuchen Sie es einmal | |
| glyphicon glyphicon-Magnete | Versuchen Sie es einmal | |
| glyphicon glyphicon-Keil-Hoch | Versuchen Sie es einmal | |
| glyphicon glyphicon-Keil-Runter | Versuchen Sie es einmal | |
| glyphicon glyphicon-Wiederholeingabe | Versuchen Sie es einmal | |
| glyphicon glyphicon-Einkaufen-Korb | Versuchen Sie es einmal | |
| glyphicon glyphicon-Ordner-Schließen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Ordner-Öffnen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Größenänderung-Vertikale | Versuchen Sie es einmal | |
| glyphicon glyphicon-Größenänderung-Horizontale | Versuchen Sie es einmal | |
| glyphicon glyphicon-HDD | Versuchen Sie es einmal | |
| glyphicon glyphicon-Trumpet | Versuchen Sie es einmal | |
| glyphicon glyphicon-Glocke | Versuchen Sie es einmal | |
| glyphicon glyphicon-Zertifikat | Versuchen Sie es einmal | |
| glyphicon glyphicon-Daumen-Hoch | Versuchen Sie es einmal | |
| glyphicon glyphicon-Daumen-Runter | Versuchen Sie es einmal | |
| glyphicon glyphicon-Hand-Rechts | Versuchen Sie es einmal | |
| glyphicon glyphicon-Hand-Links | Versuchen Sie es einmal | |
| glyphicon glyphicon-Hand-Hoch | Versuchen Sie es einmal | |
| glyphicon glyphicon-Hand-Runter | Versuchen Sie es einmal | |
| glyphicon glyphicon-Kreis-Pfeil-Rechts | Versuchen Sie es einmal | |
| glyphicon glyphicon-Kreis-Pfeil-Links | Versuchen Sie es einmal | |
| glyphicon glyphicon-Kreis-Pfeil-Hoch | Versuchen Sie es einmal | |
| glyphicon glyphicon-Kreis-Pfeil-Runter | Versuchen Sie es einmal | |
| glyphicon glyphicon-Erde | Versuchen Sie es einmal | |
| glyphicon glyphicon-Schraubenschlüssel | Versuchen Sie es einmal | |
| glyphicon glyphicon-Aufgaben | Versuchen Sie es einmal | |
| glyphicon glyphicon-Filter | Versuchen Sie es einmal | |
| glyphicon glyphicon-Koffer | Versuchen Sie es einmal | |
| glyphicon glyphicon-Vollbild | Versuchen Sie es einmal | |
| glyphicon glyphicon-Armaturenbrett | Versuchen Sie es einmal | |
| glyphicon glyphicon-Büroklammer | Versuchen Sie es einmal | |
| glyphicon glyphicon-Herz-Leer | Versuchen Sie es einmal | |
| glyphicon glyphicon-Verknüpfung | Versuchen Sie es einmal | |
| glyphicon glyphicon-Telefon | Versuchen Sie es einmal | |
| glyphicon glyphicon-Kleber | Versuchen Sie es einmal | |
| glyphicon glyphicon-USD | Versuchen Sie es einmal | |
| glyphicon glyphicon-GBP | Versuchen Sie es einmal | |
| glyphicon glyphicon-Sortieren | Versuchen Sie es einmal | |
| glyphicon glyphicon-Sortieren-Durch-Alphabetisch | Versuchen Sie es einmal | |
| glyphicon glyphicon-Sortieren-Durch-Alphabetisch-alt | Versuchen Sie es einmal | |
| glyphicon glyphicon-Sortieren-Durch-Reihenfolge | Versuchen Sie es einmal | |
| glyphicon glyphicon-Sortieren-Durch-Reihenfolge-alt | Versuchen Sie es einmal | |
| glyphicon glyphicon-Sortieren-Durch-Eigenschaften | Versuchen Sie es einmal | |
| glyphicon glyphicon-Sortieren-Durch-Eigenschaften-alt | Versuchen Sie es einmal | |
| glyphicon glyphicon-Nicht markiert | Versuchen Sie es einmal | |
| glyphicon glyphicon-Ausdehnen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Einklappen-Runter | Versuchen Sie es einmal | |
| glyphicon glyphicon-Einklappen-Hoch | Versuchen Sie es einmal | |
| glyphicon glyphicon-Protokoll-In | Versuchen Sie es einmal | |
| glyphicon glyphicon-Blitz | Versuchen Sie es einmal | |
| glyphicon glyphicon-Protokoll-Außen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Neu-Fenster | Versuchen Sie es einmal | |
| glyphicon glyphicon-Aufzeichnen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Speichern | Versuchen Sie es einmal | |
| glyphicon glyphicon-Öffnen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Gespeichert | Versuchen Sie es einmal | |
| glyphicon glyphicon-Importieren | Versuchen Sie es einmal | |
| glyphicon glyphicon-Exportieren | Versuchen Sie es einmal | |
| glyphicon glyphicon-Senden | Versuchen Sie es einmal | |
| glyphicon glyphicon-Diskette-Festplatte | Versuchen Sie es einmal | |
| glyphicon glyphicon-Diskette-Gespeichert | Versuchen Sie es einmal | |
| glyphicon glyphicon-Diskette-Entfernen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Diskette-Speichern | Versuchen Sie es einmal | |
| glyphicon glyphicon-Diskette-Öffnen | Versuchen Sie es einmal | |
| glyphicon glyphicon-Kredit-Karte | Versuchen Sie es einmal | |
| glyphicon glyphicon-Übertragung | Versuchen Sie es einmal | |
| glyphicon glyphicon-Essbesteck | Versuchen Sie es einmal | |
| glyphicon glyphicon-Kopfbedeckung | Versuchen Sie es einmal | |
| glyphicon glyphicon-gepresst | Versuchen Sie es einmal | |
| glyphicon glyphicon-Ohrhörer | Versuchen Sie es einmal | |
| glyphicon glyphicon-Telefon-alt | Versuchen Sie es einmal | |
| glyphicon glyphicon-tower | Versuchen Sie es einmal | |
| glyphicon glyphicon-stats | Versuchen Sie es einmal | |
| glyphicon glyphicon-sd-Video | Versuchen Sie es einmal | |
| glyphicon glyphicon-hd-Video | Versuchen Sie es einmal | |
| glyphicon glyphicon-Untertitel | Versuchen Sie es einmal | |
| glyphicon glyphicon-Sound-stereo | Versuchen Sie es einmal | |
| glyphicon glyphicon-Sound-Dolby | Versuchen Sie es einmal | |
| glyphicon glyphicon-Sound-5-1 | Versuchen Sie es einmal | |
| glyphicon glyphicon-Sound-6-1 | Versuchen Sie es einmal | |
| glyphicon glyphicon-Sound-7-1 | Versuchen Sie es einmal | |
| glyphicon glyphicon-copyright-mark | Versuchen Sie es einmal | |
| glyphicon glyphicon-Registration-mark | Versuchen Sie es einmal | |
| glyphicon glyphicon-Wolke-download | Versuchen Sie es einmal | |
| glyphicon glyphicon-Wolke-upload | Versuchen Sie es einmal | |
| glyphicon glyphicon-Baum-Nadelbaum | Versuchen Sie es einmal | |
| glyphicon glyphicon-Baum-Laubbäume | Versuchen Sie es einmal |