Bootstrap Font-Icons (Glyphicons)
Dieses Kapitel erklärt Font-Icons (Glyphicons) und anhand einiger Beispiele lernen Sie, wie man sie verwendet. Bootstrap enthält mehr als 200 Glyphen im Font-Format. Lassen Sie uns zunächst verstehen, was Font-Icons sind.
Was sind Font-Icons?
Font-Icons sind Icon-Schriften, die in Webprojekten verwendet werden. ObwohlGlyphicons Halflingseine kommerzielle Lizenz erfordern, können Sie diese Icons im Rahmen des Bootstrap-Projekts kostenlos nutzen.
Um den Autoren der Icons unsere Dankbarkeit zu zeigen, hoffen wir, dass Sie bei deren Verwendung einen Link zur GLYPHICONS-Website hinzufügen.
Font-Icons abrufen
Wir haben bereits im KapitelUmgebungsinstallationdie Bootstrap 3.x-Version heruntergeladen und deren Verzeichnisstruktur kennengelernt. Im Ordnerfontsfinden Sie die Font-Icons, welche die folgenden Dateien umfassen:
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
geschrieben.innerhalb des css-Ordners im Ordnerdistbootstrap.cssundbootstrap-min.cssin der Datei.
Liste der Font-Icons
Klicken Sie hier, um die Liste der verfügbaren Font-Icons anzuzeigen.
Erklärung der CSS-Regeln
Die folgenden CSS-Regeln bilden die Klasse glyphicon.
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}
Die @font-face-Regel deklariert also die font-family und den Speicherort, an dem die Glyphicons gefunden werden.
.glyphiconDie Klasse deklariert eine relative Position, die um 1px nach oben versetzt ist, wird als inline-block angezeigt, deklariert die Schriftart, legt font-style und font-weight als normal fest und setzt line-height auf 1. Verwenden Sie außerdem-webkit-font-smoothing: antialiasedund-moz-osx-font-smoothing: grayscale;um browserübergreifende Konsistenz zu erreichen.
Dann ist hier
.glyphicon:empty {
width: 1em;
}
das leere glyphicon.
Hier gibt es 200 Klassen, von denen jede Klasse auf ein Symbol abzielt. Das allgemeine Format dieser Klassen ist wie folgt:
.glyphicon-keyword:before {
content: "hexvalue";
}
Das verwendete Benutzersymbol hat beispielsweise die folgende Klasse:
.glyphicon-user:before {
content: "\e008";
}
Nutzung
Um ein Symbol zu verwenden, nutzen Sie einfach den folgenden Code. Bitte lassen Sie ausreichend Platz zwischen dem Symbol und dem Text.
<span class="glyphicon glyphicon-search"></span>
Das folgende Beispiel veranschaulicht die Verwendung von Fonts-Symbolen:
Beispiel
<p>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
</button>
</p>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user"></span> Benutzer
</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-user"></span> Benutzer
</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user"></span> Benutzer
</button>
Ausprobieren »
Das Ergebnis sieht wie folgt aus:
Navbar mit Font-Icons
Beispiel
<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">Navigation umschalten</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Projektname</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<span class="glyphicon glyphicon-home">Startseite</span></a>
</li>
<li>
<a href="#shop">
<span class="glyphicon glyphicon-shopping-cart">Shop</span></a>
</li>
<li>
<a href="#support">
<span class="glyphicon glyphicon-headphones">Support</span></a>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!--jQuery (Bootstrap-Plugins müssen eingebunden werden)-->
<script src="https://cdn.static.example.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Enthält alle kompilierten Plugins-->
<script src="https://cdn.static.example.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Ausprobieren »
Anpassen von Font-Icons
Wir haben bereits gesehen, wie man Font-Icons verwendet. Schauen wir uns als Nächstes an, wie man Font-Icons anpasst.
Wir beginnen mit dem obigen Beispiel und passen die Icons an, indem wir die Schriftgröße und -farbe ändern sowie einen Textschatten anwenden.
Hier ist der Startcode:
<button type="button" class="btn btn-primary btn-lg"> <span class="glyphicon glyphicon-user"></span> User </button>
Der Effekt ist unten dargestellt:
Anpassen der Schriftgrößen
Durch Vergrößern oder Verkleinern der Schriftgröße eines Icons können Sie das Icon größer oder kleiner erscheinen lassen.
<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px"> <span class="glyphicon glyphicon-user"></span> User </button>
Anpassen von Schriftfarben
<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);"> <span class="glyphicon glyphicon-user"></span> User </button>
Anwenden von Textschatten
<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;"> <span class="glyphicon glyphicon-user"></span> User </button>
Font-Icons online anpassen
Klicken Sie hier, um Font-Icons anzupassen »
Icon-Liste
| Icon | Klassenname | Beispiel |
|---|---|---|
| glyphicon glyphicon-asterisk | Ausprobieren | |
| glyphicon glyphicon-plus | Ausprobieren | |
| glyphicon glyphicon-minus | Ausprobieren | |
| glyphicon glyphicon-euro | Ausprobieren | |
| glyphicon glyphicon-cloud | Ausprobieren | |
| glyphicon glyphicon-envelope | Ausprobieren | |
| glyphicon glyphicon-pencil | Ausprobieren | |
| glyphicon glyphicon-glass | Ausprobieren | |
| glyphicon glyphicon-music | Ausprobieren | |
| glyphicon glyphicon-search | Ausprobieren | |
| glyphicon glyphicon-heart | Ausprobieren | |
| glyphicon glyphicon-star | Ausprobieren | |
| glyphicon glyphicon-star-empty | Ausprobieren | |
| glyphicon glyphicon-user | Ausprobieren | |
| glyphicon glyphicon-film | Ausprobieren | |
| glyphicon glyphicon-th-large | Ausprobieren | |
| glyphicon glyphicon-th | Ausprobieren | |
| glyphicon glyphicon-th-list | Ausprobieren | |
| glyphicon glyphicon-ok | Ausprobieren | |
| glyphicon glyphicon-remove | Ausprobieren | |
| glyphicon glyphicon-zoom-in | Ausprobieren | |
| glyphicon glyphicon-zoom-out | Ausprobieren | |
| glyphicon glyphicon-off | Ausprobieren | |
| glyphicon glyphicon-signal | Ausprobieren | |
| glyphicon glyphicon-cog | Ausprobieren | |
| glyphicon glyphicon-trash | Ausprobieren | |
| glyphicon glyphicon-home | Ausprobieren | |
| glyphicon glyphicon-file | Ausprobieren | |
| glyphicon glyphicon-time | Ausprobieren | |
| glyphicon glyphicon-road | Ausprobieren | |
| glyphicon glyphicon-download-alt | Ausprobieren | |
| glyphicon glyphicon-download | Ausprobieren | |
| glyphicon glyphicon-upload | Ausprobieren | |
| glyphicon glyphicon-inbox | Ausprobieren | |
| glyphicon glyphicon-play-circle | Ausprobieren | |
| glyphicon glyphicon-repeat | Ausprobieren | |
| glyphicon glyphicon-refresh | Ausprobieren | |
| glyphicon glyphicon-list-alt | Ausprobieren | |
| glyphicon glyphicon-lock | Ausprobieren | |
| glyphicon glyphicon-flag | Ausprobieren | |
| glyphicon glyphicon-headphones | Ausprobieren | |
| glyphicon glyphicon-volume-off | Ausprobieren | |
| glyphicon glyphicon-volume-down | Ausprobieren | |
| glyphicon glyphicon-volume-up | Ausprobieren | |
| glyphicon glyphicon-qrcode | Ausprobieren | |
| glyphicon glyphicon-barcode | Ausprobieren | |
| glyphicon glyphicon-tag | Ausprobieren | |
| glyphicon glyphicon-tags | Ausprobieren | |
| glyphicon glyphicon-book | Ausprobieren | |
| glyphicon glyphicon-bookmark | Ausprobieren | |
| glyphicon glyphicon-print | Ausprobieren | |
| glyphicon glyphicon-camera | Ausprobieren | |
| glyphicon glyphicon-font | Ausprobieren | |
| glyphicon glyphicon-bold | Ausprobieren | |
| glyphicon glyphicon-italic | Ausprobieren | |
| glyphicon glyphicon-text-height | Ausprobieren | |
| glyphicon glyphicon-text-width | Ausprobieren | |
| glyphicon glyphicon-align-left | Ausprobieren | |
| glyphicon glyphicon-align-center | Ausprobieren | |
| glyphicon glyphicon-align-right | Ausprobieren | |
| glyphicon glyphicon-align-justify | Ausprobieren | |
| glyphicon glyphicon-list | Ausprobieren | |
| glyphicon glyphicon-indent-left | Ausprobieren | |
| glyphicon glyphicon-indent-right | Ausprobieren | |
| glyphicon glyphicon-facetime-video | Ausprobieren | |
| glyphicon glyphicon-picture | Ausprobieren | |
| glyphicon glyphicon-map-marker | Ausprobieren | |
| glyphicon glyphicon-adjust | Ausprobieren | |
| glyphicon glyphicon-tint | Ausprobieren | |
| glyphicon glyphicon-edit | Ausprobieren | |
| glyphicon glyphicon-share | Ausprobieren | |
| glyphicon glyphicon-check | Ausprobieren | |
| glyphicon glyphicon-move | Ausprobieren | |
| glyphicon glyphicon-step-backward | Ausprobieren | |
| glyphicon glyphicon-fast-backward | Ausprobieren | |
| glyphicon glyphicon-backward | Ausprobieren | |
| glyphicon glyphicon-play | Ausprobieren | |
| glyphicon glyphicon-pause | Ausprobieren | |
| glyphicon glyphicon-stop | Ausprobieren | |
| glyphicon glyphicon-forward | Ausprobieren | |
| glyphicon glyphicon-fast-forward | Ausprobieren | |
| glyphicon glyphicon-step-forward | Ausprobieren | |
| glyphicon glyphicon-eject | Ausprobieren | |
| glyphicon glyphicon-chevron-left | Ausprobieren | |
| glyphicon glyphicon-chevron-right | Ausprobieren | |
| glyphicon glyphicon-plus-sign | Ausprobieren | |
| glyphicon glyphicon-minus-sign | Ausprobieren | |
| glyphicon glyphicon-remove-sign | Ausprobieren | |
| glyphicon glyphicon-ok-sign | Ausprobieren | |
| glyphicon glyphicon-question-sign | Ausprobieren | |
| glyphicon glyphicon-info-sign | Ausprobieren | |
| glyphicon glyphicon-screenshot | Ausprobieren | |
| glyphicon glyphicon-remove-circle | Ausprobieren | |
| glyphicon glyphicon-ok-circle | Ausprobieren | |
| glyphicon glyphicon-ban-circle | Ausprobieren | |
| glyphicon glyphicon-arrow-left | Ausprobieren | |
| glyphicon glyphicon-arrow-right | Ausprobieren | |
| glyphicon glyphicon-arrow-up | Ausprobieren | |
| glyphicon glyphicon-arrow-down | Ausprobieren | |
| glyphicon glyphicon-share-alt | Ausprobieren | |
| glyphicon glyphicon-resize-full | Ausprobieren | |
| glyphicon glyphicon-resize-small | Ausprobieren | |
| glyphicon glyphicon-exclamation-sign | Ausprobieren | |
| glyphicon glyphicon-gift | Ausprobieren | |
| glyphicon glyphicon-leaf | Ausprobieren | |
| glyphicon glyphicon-fire | Ausprobieren | |
| glyphicon glyphicon-eye-open | Ausprobieren | |
| glyphicon glyphicon-eye-close | Ausprobieren | |
| glyphicon glyphicon-warning-sign | Ausprobieren | |
| glyphicon glyphicon-plane | Ausprobieren | |
| glyphicon glyphicon-calendar | Ausprobieren | |
| glyphicon glyphicon-random | Ausprobieren | |
| glyphicon glyphicon-comment | Ausprobieren | |
| glyphicon glyphicon-magnet | Ausprobieren | |
| glyphicon glyphicon-chevron-up | Ausprobieren | |
| glyphicon glyphicon-chevron-down | Ausprobieren | |
| glyphicon glyphicon-retweet | Ausprobieren | |
| glyphicon glyphicon-shopping-cart | Ausprobieren | |
| glyphicon glyphicon-folder-close | Ausprobieren | |
| glyphicon glyphicon-folder-open | Ausprobieren | |
| glyphicon glyphicon-resize-vertical | Ausprobieren | |
| glyphicon glyphicon-resize-horizontal | Ausprobieren | |
| glyphicon glyphicon-hdd | Ausprobieren | |
| glyphicon glyphicon-bullhorn | Ausprobieren | |
| glyphicon glyphicon-bell | Ausprobieren | |
| glyphicon glyphicon-certificate | Ausprobieren | |
| glyphicon glyphicon-thumbs-up | Ausprobieren | |
| glyphicon glyphicon-thumbs-down | Ausprobieren | |
| glyphicon glyphicon-hand-right | Ausprobieren | |
| glyphicon glyphicon-hand-left | Ausprobieren | |
| glyphicon glyphicon-hand-up | Ausprobieren | |
| glyphicon glyphicon-hand-down | Ausprobieren | |
| glyphicon glyphicon-circle-arrow-right | Ausprobieren | |
| glyphicon glyphicon-circle-arrow-left | Ausprobieren | |
| glyphicon glyphicon-circle-arrow-up | Ausprobieren | |
| glyphicon glyphicon-circle-arrow-down | Ausprobieren | |
| glyphicon glyphicon-globe | Ausprobieren | |
| glyphicon glyphicon-wrench | Ausprobieren | |
| glyphicon glyphicon-tasks | Ausprobieren | |
| glyphicon glyphicon-filter | Ausprobieren | |
| glyphicon glyphicon-briefcase | Ausprobieren | |
| glyphicon glyphicon-fullscreen | Ausprobieren | |
| glyphicon glyphicon-dashboard | Ausprobieren | |
| glyphicon glyphicon-paperclip | Ausprobieren | |
| glyphicon glyphicon-heart-empty | Ausprobieren | |
| glyphicon glyphicon-link | Ausprobieren | |
| glyphicon glyphicon-phone | Ausprobieren | |
| glyphicon glyphicon-pushpin | Ausprobieren | |
| glyphicon glyphicon-usd | Ausprobieren | |
| glyphicon glyphicon-gbp | Ausprobieren | |
| glyphicon glyphicon-sort | Ausprobieren | |
| glyphicon glyphicon-sort-by-alphabet | Ausprobieren | |
| glyphicon glyphicon-sort-by-alphabet-alt | Ausprobieren | |
| glyphicon glyphicon-sort-by-order | Ausprobieren | |
| glyphicon glyphicon-sort-by-order-alt | Ausprobieren | |
| glyphicon glyphicon-sort-by-attributes | Ausprobieren | |
| glyphicon glyphicon-sort-by-attributes-alt | Ausprobieren | |
| glyphicon glyphicon-unchecked | Ausprobieren | |
| glyphicon glyphicon-expand | Ausprobieren | |
| glyphicon glyphicon-collapse-down | Ausprobieren | |
| glyphicon glyphicon-collapse-up | Ausprobieren | |
| glyphicon glyphicon-log-in | Ausprobieren | |
| glyphicon glyphicon-flash | Ausprobieren | |
| glyphicon glyphicon-log-out | Ausprobieren | |
| glyphicon glyphicon-new-window | Ausprobieren | |
| glyphicon glyphicon-record | Ausprobieren | |
| glyphicon glyphicon-save | Ausprobieren | |
| glyphicon glyphicon-open | Ausprobieren | |
| glyphicon glyphicon-saved | Ausprobieren | |
| glyphicon glyphicon-import | Ausprobieren | |
| glyphicon glyphicon-export | Ausprobieren | |
| glyphicon glyphicon-send | Ausprobieren | |
| glyphicon glyphicon-floppy-disk | Ausprobieren | |
| glyphicon glyphicon-floppy-saved | Ausprobieren | |
| glyphicon glyphicon-floppy-remove | Ausprobieren | |
| glyphicon glyphicon-floppy-save | Ausprobieren | |
| glyphicon glyphicon-floppy-open | Ausprobieren | |
| glyphicon glyphicon-credit-card | Ausprobieren | |
| glyphicon glyphicon-transfer | Ausprobieren | |
| glyphicon glyphicon-cutlery | Ausprobieren | |
| glyphicon glyphicon-header | Ausprobieren | |
| glyphicon glyphicon-compressed | Ausprobieren | |
| glyphicon glyphicon-earphone | Ausprobieren | |
| glyphicon glyphicon-phone-alt | Ausprobieren | |
| glyphicon glyphicon-tower | Ausprobieren | |
| glyphicon glyphicon-stats | Ausprobieren | |
| glyphicon glyphicon-sd-video | Ausprobieren | |
| glyphicon glyphicon-hd-video | Ausprobieren | |
| glyphicon glyphicon-subtitles | Ausprobieren | |
| glyphicon glyphicon-sound-stereo | Ausprobieren | |
| glyphicon glyphicon-sound-dolby | Ausprobieren | |
| glyphicon glyphicon-sound-5-1 | Ausprobieren | |
| glyphicon glyphicon-sound-6-1 | Ausprobieren | |
| glyphicon glyphicon-sound-7-1 | Ausprobieren | |
| glyphicon glyphicon-copyright-mark | Ausprobieren | |
| glyphicon glyphicon-registration-mark | Ausprobieren | |
| glyphicon glyphicon-cloud-download | Ausprobieren | |
| glyphicon glyphicon-cloud-upload | Ausprobieren | |
| glyphicon glyphicon-tree-conifer | Ausprobieren | |
| glyphicon glyphicon-tree-deciduous | Ausprobieren |