Icons in Bootstrap - Eine Anleitung

Ein Icon ist lauf Definition ein Piktogramm, als eine kleine Grafik, die durch vereinfachte grafische Darstellung eine bestimmte Information vermittelt. Icons werden meist eingesetzt, um Schaltflächen zu kennzeichnen. Damit deren Bedeutung sicht leicht im Kopf des Benutzer einprägt.

Icons in Bootstrap verwenden

Bootstrap bietet von Haus die Verwendung von Icons an. Dabei wird auf die freie Icon-Sammlung von Glyphicons zurückgegriffen.

Um Icons zu verwenden, nutzt man das -Element. Anschließend vergibt man eine Klasse (glyphicon-xxx) wobei xxx ersetzt werden muss mit dem genwünschten Icon. Eine Übersicht aller Items gibt’s direkt hier.

So sieht’s aus CSS-Klasse
  <i class="icon-search"></i>
  <i class="icon-home"></i>

Icons bei Links

Icons sind auch bei normalen Textlinks kein Problem.

So sieht das aus:

MP3 Download

Der Quellcode
<a href="#">MP3 Download <i class="icon-music"></i></a>

Icons in Buttons

Am besten eignen sich Icons zur Verwendung in normalen Buttons.

So sieht das aus:

Der Quellcode
<button class="btn btn-success"><i class="icon-ok icon-white"></i> OK</button>

Um das Icon weiß darzustellen, gibt man die Klasse icon-white an.

Icons in Formularfeldern

Interessant ist der Einsatz von Icons in Formularfeldern, der mit Bootstrap ein Kinderspiel ist.

So sieht das aus:

Der Quellcode
<div class="input-group">
  <span class="input-group-addon"><i class="icon-envelope"></i></span>
  <input type="text" />
</div>

Um ein Icon vor ein Eingabefeld anzuhängen, muss man zunächst ein

-Element mit der Klasse input-group erstellen. Darin kommt dann ein -Element mit Klasse und dem Icon. Außerdem wird in das
-Element noch das zugeörige Eingabefeld eingefgügt.
So sieht’s aus CSS-Klasse
<div class="input-group">
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-envelop" aria-hidden="true"></span>
  </span>
  <input type="text" />
</div>
<div class="input-group">
  <input type="text" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
  </span>
</div>

Weitere Beispiele

→ Beispiel anzeigen: Icons in Bootstrap

Hast du eine Frage zu dieser Seite?
Nach oben
BootstrapWorld.de nutzt Cookies, um euch die bestmögliche Funktionalität zu bieten.
Details ansehen
OK