code.makery

Learning how to code.

Subscribe to Updates
Edit on GitHub
Mehr HTML & CSS (Deutsch)

Icons auf Website verwenden

Achtung: Diese Seite wird gerade aktualisiert auf Bootstrap 4, beinhaltet aber noch Informationen zu Bootstrap 3. Bitte verwenden Sie in der Zwischenzeit die Originaldokumentation von Bootstrap.

Icons in eine Webseite einzufügen ist nicht schwer. Aber wenn man Texte und Icons kombiniert (z.B. für einen Button) oder wenn die Icons in der Grösse veränderbar sein sollen, dann wird es schwierig.

Die Lösung für dieses Problem sind Icon Fonts. Icon Fonts sind Schriftarten, welche anstatt Buchstaben nur Icons enthalten. Dadurch können diese Icons genauso verwendet werden, wie gewöhnliche Schriften, d.h. man kann ihre Grösse und auch die Farbe verändern.

Im Folgenden schauen wir ein paar Icon Fonts und deren Verwendung an.

Glyphicons (mit Bootstrap 3)

Falls Sie Bootstrap in Ihrem Projekt noch nicht integriert haben, lesen Sie zuerst den Teil über Bootstrap Framework verwenden aus dem HTML & CSS Tutorial.

Wenn Sie Bootstrap verwenden, dann sind bereits 200 Icons von Glyphicons integriert.

Sie finden eine Liste der Verfügbaren Icons in der Bootstrap Dokumentation unter Glyphicons.

Um ein Icon zu verwenden definieren wir jeweils ein <span>-Element und geben ihm zwei CSS-Klassen:

<span class="glyphicon glyphicon-send"></span>

Dieses span kann nun irgendwo eigenfügt werden. Zum Beispiel in den Titel einer Kontaktseite:

Kontakt Icon

Font Awesome

Eine der bekanntesten frei verfügbaren Icon Fonts ist Font Awesome. Font Awesome kommt mit über 500 Icons.

Um Font Awesome zu integrieren steht wie für Bootstrap auch ein CDN-Link zur Verfügung. Damit muss gar nichts heruntergeladen werden, sondern wir können einfach einen Link zum CSS in den <head>-Bereich unserer HTML-Datei einfügen:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Hinweis: Schauen Sie auf Font Awesome nach, welches der aktuelle Link mit der neusten Versionsnummer ist.

Wie bei den Glyphicons werden die Font Awesome Icons mit zwei CSS-Klassen verwendet. Anstelle des <span>-Elements wird bei Font Awesome meistens das <i>-Element verwendet, wobei dies eigentlich keine Rolle spielt.

<i class="fa fa-flag"><i>

Dieses Beispiel gibt uns eine Flagge: Font Awesome Flagge

Schauen Sie sich die Beispiele auf Font Awesome an, um zu sehen, auf welche Arten die Icons verwendet werden können. Sie finden dort auch Beispiele zur Verwendung mit für Bootstrap 3.

Weitere Möglichkeiten

  • Eine Liste von 12 kostenlosen Icon Fonts.
  • Auf IcoMoon gibt es eine App, um eine eigene Icon Font zusammen zu stellen.
  • Fontello ist ein weiterer Generator, um eigene Icon Fonts zu erstellen.
  • Iconfinder - Viele frei verfügbare Icons (Achtung: je nach Lizenz muss der Author genannt werden)

Comments