Wie du mühelos Icon-Fonts einsetzen kannst – Eine Anleitung und Übersicht

Letztes Artikel-Update:
10. Oktober, 2019

Der Artikel zeigt die Vor- und Nachteile von Icons Fonts auf. Dazu gibt es eine Schritt für Schritt-Anleitung zur Einbindung von Icon Fonts mit Font Awesome und Genericons.

Icons spielen im Screendesign und in User Interfaces eine besondere Rolle.

Denn Icons können schnell und intuitiv eine besondere Bedeutung vermitteln.

Entsprechende Icon-Fonts erleichtern hier den Einsatz von Icons in Webdesigns.

Im Alltag begegnen uns Icons zum Beispiel auf Straßenschildern, Fernbedienungen, Fahrschein-Automaten. Die vereinfachte stilisierte Darstellungsform hilft uns bei der Orientierung und kann Inhalte oft schneller und intuitiver vermitteln.

Icons spielen auch im Webdesign eine besondere Rolle:

Eine kleine Lupe im Suchfeld, das Warenkorbsymbol, der Brief als E-Mail-Adresse, das Haus als Link zur Startseite, die Liste könnte man beliebig fortführen. Sie helfen die Inhalte schneller zu verstehen und die Bedienbarkeit zu erhöhen, bzw. den Nutzen einer Funktion zu verdeutlichen.

Icons als Bilder

„Früher“ wurden Icons als Bild in eine Webseite eingebunden. Dies erfolgte entweder mit dem HTML-Image-Element oder per CSS als background-image. Der Aufwand solche Iconbilder zu erstellen war überschaubar, solange die Anzahl der Icons im Rahmen blieb. Die Dateigrößen waren gering. Die Pixelmaße mussten allerdings für Retina-Displays verdoppelt werden, damit die Bilder auf entsprechenden Bildschirmen weiterhin scharf dargestellt wurden.

Icons als Schrift

Icon-Fonts sind vielfältig nutzbar.
Icon-Fonts sind vielfältig nutzbar.

Fast parallel zu den sogenannten Webfonts sind allerdings in den letzetn jahren einige die Icon-Fonts enstanden. Statt also ein Icon durch ein Bild darzustellen, gibt es Schriftarten, die keine Buchstaben und Zahlen enthalten, sondern eine große Auswahl an Icons.

Diese Schriftarten müssen zusätzlich geladen werden und dann per CSS an entsprechender Stelle eingebunden/angezeigt werden. Statt eines Bildes wird dann eine „Buchstabe“ (einfarbiges Icon) angezeigt. Ein typisches Beispiel sind die Social-Netowrk-Icons, die per Icon-Fonts dargestellt werden können.

So muss nicht jedes einzelne Icon in einem Grafikprogramm erstellt und gespeichert werden, sondern ganz simpel mit wenig CSS-Code angezeigt werden. Icon-Fonts sind dabei so flexibel wie „normale“ Schriftarten. Die lassen sie sich beispielsweise einfärben und vergrößern.

Icon Fonts bei mawendo.de als Teaser
Icon Fonts bei mawendo.de als Teaser

Vorteile der Icon-Fonts

Der Einsatz und die Einbindung von Icon-Fonts bringt die gerade in diesen responsiven Webdesign-Zeiten einige Vorteile mit sich. Die Flexibilität und und Bearbeitungsmöglichkeiten ähnlich klasssichen HTML-Texten bietet viele Vorteile:

  • beliebig skalierbar / auflösungsunabhängig
  • gestochen scharf (auch bei Retina Displays)
  • leichte und flexible Einbindung
  • Anpassung per CSS (Farbe, Größe, aber auch CSS3-Effekte wie text-shadow, Rotation)
  • erlauben ein Gestalten im Browser
  • umfangreiches Angebot an Icon-Fonts (siehe unten)
  • auch mit älteren Webbrowsern kompatibel
  • geringer Speicherbedarf (im Vergleich zu mehreren Icons als Pixelbilder eingebunden)
  • tranparenter Hintergrund

Teilweise lassen sich sogar individuelle Icon-Fonts-Zeichensätze erstellen. Hier können dann nur die wirklich benötigten Icons eingebunden werden, was den Ladebedarf entsprechend senkt.

Auch auf Buttons können Icon-Fonts wirken.
Auch auf Buttons können Icon-Fonts wirken.

Nachteile der Icon-Fonts

Wie alles im Leben, haben auch die Icon-Fonts ihre zwei Seiten:

  • nur einfarbige Icons möglich (bzw. mit CSS3 auch Verläufe)
  • keine individuelle Icon-Gestaltung möglich (bzw. sehr aufwenig oder per SVG-Images zu realisieren)
  • häufig muss ein kompletter Schriftsatz eingebunden werden, auch wenn nur sehr wenige Icons gebraucht werden
  • Einschränkung auf den Icon Fonts eigenen Zeichensatz
  • Die Auswahl an kostenfreien Icon-Fonts ist noch beschränkt. Einige Icon Fonts kosten Lizensierungsgebühren.

Der Einsatz der Icon Fonts per HTML und CSS unterscheidet sich etwas von Icon Font zu Icon Font. Exemplarisch stelle ich folgende die EInbindung anhand der Icon Fonts Font Awesome und Genericons vor.


Schritt für Schritt-Einbindung von Icon Fonts mit Font Awesome:

Die wohl einfachste Einbindung von Icon Fonts  geht mit dem Font Awesome-Schriftsatz, der frei nutzbar ist und über 500 Icons zur Verfügung stellt. Hier werden die Icons nur mit Hilfe einer CSS-Klasse im HTML-Quellcode definiert.

Auswahl der Font Awesome Icons
Auswahl der Font Awesome Icons

 1. Einbindung des Icon-Fonts in die eigene Webseite

Zuerst muss der Icon-Font von der Font Awesome-Webseite herunter geladen und auf den eigenen Webserver kopiert werden.

Dann muss die heruntergeladene CSS-Datei im head-bereich des HTML-Dokumentes eingebunden werden:

<link rel="stylesheet" href="pfad-zur-css-datei/font-awesome.min.css">

Achtung: Der Schriften-Ordner („fonts“) muss natürlich auch mit kopiert werden und der CSS- und der fonts-Ordner sollten auf der gleichen Ebene bleiben, damit die CSS-Datei die Icon-Schrift findet und einbinden kann.

2. Ein Icon definieren

Die Definition eines Icons erfolgt dann mit Hilfe des <i>-Elements in HTML. Das Element bekommt dann eine bestimmte Klasse zugewiesen. Jedes Icon hat seine eigene Klasse, eine Übersicht der Icon-Klassennamen findest Du hier.

In der Praxis sieht das dann folgendermaßen aus:

<i class="fa fa-search"></i>Suche
Suche Icon mit Icon Fonts von Font Awesome

Es wird ein <i>-Elements definiert, dass eine entsprechende Klasse für ein bestimmte Icon bekommt. Dann wird das Element auch gleich wieder geschlossen. Die „fa“-Klasse definiert die Font-Awesome-Schriftart und an die zweite Klasse („fa-„) wird der individuelle Iconname gehängt. Das Ergebnis:

Die Einsatz-Möglichkeiten sind jetzt groß. In Buttons, der Navigation, vor Aufzählungspunkten (Listen) usw.

Mehr zu den flexiblen Einsatzmöglichkeiten der Font Awesome-Schrift findest Du hier.


Schritt für Schritt-Einbindung von Icon Fonts mit Genericons:

Als zweite Variante erkläre ich noch die Einbindung der ebenfalls beliebten Genericons. Die Auswahl an Icons ist hier wesentlich geringer (knapp 150), aber für die meisten Projekte vermutlich ausreichend.

 1. Einbindung des Icon-Fonts in die eigene Webseite

Auch hier muss zuerst der Icon-Font-Ordner von der Genericons herunter und auf den eigenen Webseiten-Server hochgeladen werden.

Dann wird die CSS-Datei im head-bereich des HTML-Dokumentes eingebunden:

<link href="pfad-zur-css-datei/genericons.css"; rel="stylesheet">

2. Ein Icon definieren

Die Genericons-Webseite macht einem die Auswahl und den Einsatz eines Icons ziemlich einfach. Icon anklicken und dann die Option „Copy HTML“ wählen. Der entsprechende HMTL-Quellcode wird dann in die Zwischenablage kopiert und kann im HTML-Dokument eingesetzt werden, z.B:

<span class="genericon genericon-vimeo"></span> Vimeo
genericons
Icon mit Icon Fonts von Genericons

Die Klassenbezeichnung ist hier ähnlich wie im ersten Beispiel, eben nur mit „genericon“ statt „fa“. Das Ergebnis sieht dann so aus:

3. Eine Checkliste definieren

Auch Aufzählungspunkte lassen sich mit den Icons ansprechend gestalten. Folgendes Beispiel zur Veranschaulichung:

<ul class="checklist">
<li>Mehl</li>
<li>Salz</li>
<li>Wasser</li>
</ul>

Es wird eine HTML-Liste definiert und bekommt eine Klasse „checklist“ zugewiesen.

Diese selbst definierte Klasse bekommt dann ein individuelles Icon als Aufzählungspunkt definiert:

.checklist {
list-style-type: none;
}
.my-checklist li:before {
font-family: Genericons;
content: '\f429';
}

Zuerst werden die HTML-typischen Listenpunkte entfernt (list-style-type: none). In der zweiten CSS-Deklaration nutzt die CSS-Pseudoklasse :before , mit der sich VOR einem HTML-Element ein beliebiger Inhalt einfügen lässt. Der Inhalt selber wird dann mit der Eigenschaft content bestimmt, in dem Falle das gewünschte Icon (den Wert bekommst du durch „Copy CSS“). Die font-family-Zuweisung bestimmt dann die Genericons-Schriftart.

Zusätzlich können dann noch ein paar CSS-Anweisungen ergänzt, um das Aussehen anzupassen, wie Schriftgröße, -farbe und Abstände:

.my-checklist li:before {
        font: bold 18px/1 ‚Genericons';
        content: ‚\f429′;
        vertical-align: top;
        color: #F90B6D;
}
Listenpunkte-mit-Icon-Fonts

Und das Ergebnis kann sich sehen lassen:

So einfach können Fonts-Icon eingesetzt werden. Jetzt bist du dran!


Auswahl an Icon-Fonts

Im folgenden noch eine kleine Übersicht an Icon-Fonts:

Icon Fonts Retina Responsive Webdesign
Icon Fonts sind beliebig skalierbar. Daher für Retina Displays und responsive Webdesign besonders geeignet

Und wenn du ein bisschen ausgefallenere Icons suchst, wirst du bestimmt bei 20 Gorgeous Free Icon Fonts to Use in Your Designs fündig.

Fazit

Icon-Fonts erweitern den gestalterischen Spielraum eines Webdesigners. Ihre technische Flexibilität ist ein schlagkräftiges Argument zukünftig Icon-Fonts einzusetzen, wenn Icons gebraucht werden. Die einfache Einbindung, die Skalierbarkeit, die gerade bei responsiven Webdesigns und Reatina-Displays zum Tragen kommt,, ihre gestochen scharfe Darstellung und die Anpassungsmöglichkeiten mit CSS sind große Argumente für ihren Einsatz.

Lediglich bei feiner ausgestalteten Icons können sie nicht mithalten. Wer es also individueller mag, muss wohl doch Bilder nehmen.

Hole dir die Webdesign-CHECKLISTE
mit über 90 Checkpunkten für Dein nächstes Projekt &
den monatlichen Webdesign-NEWSLETTER:

Schließe dich über 2.560  Newsletter-Abonnenten an!

Keine Sorge, Spam gibt es hier nicht, stattdessen regelmäßig Webdesign-Tipps, -Links und -Angebote von mir! Du kannst den Newsletter auch jederzeit problemlos abbestellen. Mehr Infos dazu:
(Beispiele, Datenschutz, Analyse und Widerruf)

Kommentare zum Artikel

5 Kommentare zu „Wie du mühelos Icon-Fonts einsetzen kannst – Eine Anleitung und Übersicht“

  1. Ist „Symbol“ das, was hier als sogenannte „icon“-Schriftart bezeichnet wird?

    Ich muß ein 500 Seiten langes Dokument, das in Neugriechisch ist, in eine Webseite einpflegen. Leider ist das ganze in der „Schriftart“ namens „Symbol“ erstellt.

    Was ja eben eigentlich gar eine „richtige“ Schriftart ist, sondern es sind ja Symbole.

    Natürlich will man da nicht Buchstabe für Buchstabe in eine normale neugriechische Schriftart übertragen.

    Daher suche ich nach einem Weg, wie man das einfügen kann in die Webseite.

    Danke vielmals für die Hilfe.

  2. Für mich fehlt am Schluss doch ganz klar noch die Google Material Icon Font. Wäre toll, wenn diese vielleicht noch ergänzt wird 🙂

    1. Hallo Lara,
      danke für dein Kommentar. Demnächst will ich den Artikel sowieso überarbeiten. Dann ergänze ich deinen Hinweis!

      Gruss
      Martin

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Über den Autor

Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa.
Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln auf dieser Website.

Mehr über diese Website
und den Autor erfahren   →

Ähnliche Artikel

15 Minuten für gute Webtypografie mit CSS

Die typografische Gestaltung sorgt für die Lesbarkeit der Texte. Und das wollen wir doch schließlich alle: dass unsere Texte gelesen werden. Dieser Artikel zeigt dir wie du mit CSS-Anweisungen eine gute, lesbare Typografie schaffst.

Bilder optimieren fürs Web – Tools, Dateiformate & Plugins

Bilder sind ein essentieller Bestandteil der Webseiten-Inhalte. Und spätestens seit die Ladezeit ein Rankingfaktor für die Suchmaschinen ist, gilt es auf optimierte Bilder zu achten.
In diesem Artikel erfährst du, welche vielfältigen Möglichkeiten es gibt Bilder für Webseiten zu optimieren und die Ladezeit und Nutzungserlebnis damit zu verbessern.

Der Leitfaden für CSS3-Animationen

Dieser Leitfaden zeigt dir die Animationsmöglichkeiten mit CSS3 auf: CSS3 transitions und Keyframe-Animationen werden an Praxisbeispielen erklärt. Dazu werden CSS3-Bibliotheken vorgestellt.

Bilde dich weiter

Scroll to Top

Hole dir die Webdesign-CHECKLISTE mit über 90 Checkpunkten für Dein nächstes Projekt & den monatlichen Webdesign-NEWSLETTER:

Schließe dich über 2.560 Newsletter-Abonnenten an

Keine Sorge, Spam gibt es hier nicht, stattdessen regelmäßig Webdesign-Tipps, -Links und -Angebote von mir! Du kannst den Newsletter auch jederzeit problemlos abbestellen. Mehr Infos dazu:
(Beispiele, Datenschutz, Analyse und Widerruf)