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

Letztes Artikel-Update: 17. April 2021

Der Artikel zeigt dir die Vor- und Nachteile von Icons Fonts auf. Dazu gibt es eine Schritt für Schritt-Anleitung zur Einbindung von Icon Fonts mit Google Icon Fonts, Font Awesome und Genericons Neue.
4.8
(65)

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

Icons spielen auch im Webdesign und in User Interfaces 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.

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

Wie du mühelos Icon Fonts einbinden kannst – Eine Anleitung und Übersicht 1
Icon-Fonts sind vielfältig nutzbar.

Icons als Bilder

„Früher“ wurden Icons als Bild in eine Website 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

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

Diese Schriftarten müssen – ähnlich wie Webfonts – 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-Network-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. So lassen sie sich beispielsweise problemlos einfärben und vergrößern.

Wie du mühelos Icon Fonts einbinden kannst – Eine Anleitung und Übersicht 2
Icon Fonts als Unterstützung für Teaser und Inhaltsabschnitte.

Vorteile der Icon-Fonts

Der Einsatz und die Einbindung von Icon-Fonts bringt gerade in diesen responsiven Webdesign-Zeiten einige Vorteile mit sich. Die Flexibilität 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, rotate)
  • 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 im Folgenden die Einbindung anhand von Font Awesome, Genericons und des Google Icon Fonts 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 1.600 Icons zur Verfügung stellt (in einer kostenpflichtigen Pro-Version sogar über 7.800 Icons). Hier werden die Icons nur mit Hilfe einer CSS-Klasse im HTML-Quellcode definiert.

Wie du mühelos Icon Fonts einbinden kannst – Eine Anleitung und Übersicht 3
Auswahl der Font Awesome Icons

 1. Einbindung des Icon-Fonts in die eigene Website

Zuerst muss der Icon-Font von der Font Awesome-Website 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/all.css">

Achtung: Der Schriften-Ordner (webfonts) muss natürlich auch mit kopiert werden und der CSS- und der webfonts-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 Icons und deren Klassennamenen findest Du hier.

Wie du mühelos Icon Fonts einbinden kannst – Eine Anleitung und Übersicht 4

In der Praxis sieht das dann folgendermaßen aus:

<i class="fas fa-anchor"></i>

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.

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


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

Als zweite Variante erkläre ich die Einbindung der ebenfalls beliebten Genericons Neue. Die Auswahl an Icons ist hier wesentlich geringer (knapp 150), für viele Projekte aber vermutlich ausreichend. Es gibt unterschiedliche Wege die Genericons-Icons einzusetzen. Man kann direkt die SVG-Formate nutzen oder diese über eine CSS-Datei laden (ähnlich wie bei Font Awesome).

Wie du mühelos Icon Fonts einbinden kannst – Eine Anleitung und Übersicht 5
HTML-Code für die Einbindung eines Genericon Neue Icons.

 1. Einbindung des Icon-Fonts in die eigene Website per CSS

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

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

<link href="pfad-zur-css-datei/Genericons-Neue.css">

2. Ein Icon definieren

Auf der Genericons Neue-Website kannst du direkt mit Klick auf ein Icon den HTML-Code kopieren. Diesen kannst du nutzen, wenn du die Icons per SVG-Grafik einbinden willst. Bei Einsatz des Icon-Fonts per CSS solltest am einfachsten die Genericons-Neue.html anschauen, die im Download-Ordner liegt (Unterordner icon-font).

Wie du mühelos Icon Fonts einbinden kannst – Eine Anleitung und Übersicht 6
Aus der Genericons Neue-HTML-Datei lassen sich die einzelnen Icons anzeigen und der entsprechende CSS-Code kopieren.

Hier findest du eine Übersicht aller Icons und kannst den Code über die Webenwickler-Konsole oder direkt au der HTML-Datei kopieren, z.B:

<i class="genericons-neue genericons-neue-checkmark"></i>

Die Klassenbezeichnung ist hier wie im ersten Beispiel, eben nur mit genericons-neue statt fa. Und ergänzend dadies jeweilige Iconklasse (hier genericons-neue-checkmark).

3. Beispiel: Eine Checkliste mit IconFonts definieren

Als typisches Webdesign-Praxisbeispiel lassen sich Aufzählungspunktemit den Icons ansprechend gestalten

Folgender Code zur Veranschaulichung:

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

Es wird eine HTML-Liste definiert und bekommt die (selbst definierte) Klasse checklist zugewiesen.

Der Klasse wird dann ein individuelles Icon als Aufzählungspunkt definiert:

.checklist {
	list-style-type: none;
}

.checklist li:before {
 	font-family:  "Genericons-Neue";
	content: "\f418";
}

Zuerst werden die HTML-typischen runden Listenpunkte entfernt (list-style-type: none). In der zweiten CSS-Deklaration wird die CSS-Pseudoklasse :before definiert, 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. Die font-family-Zuweisung bestimmt dann die Genericons-Schriftart.

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

.checklist li:before {
	font: bold 18px/1  "Genericons-Neue";
	content: "\f418";
	vertical-align: top;
	color: #F90B6D;
	padding-right: 7px;
}

Und das Ergebnis kann sich sehen lassen:

Wie du mühelos Icon Fonts einbinden kannst – Eine Anleitung und Übersicht 7

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


Google Fonts – Material Icons

Schon länger bekannt ist das Material Design von Google. Ein ausgefeiltes Design-System aus Komponenten wie Farben und Icons für die Gestaltung von Websites und Apps. Passend zu diesem System wurden Material Icons gestaltet, die sich über die Google Fonts auch in beliebigen Websites einsetzen lassen.

Wie du mühelos Icon Fonts einbinden kannst – Eine Anleitung und Übersicht 8

1. Laden des Icon Fonts

Zuerst muss der Google Icon Font im HTML-head-Bereich geladen werden:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2. Icon-Defintion

Die Einbindung im HTML-Code erfolgt durch ein span-Element:

<span class="material-icons-outlined">favorites</span>

Fertig ist schon die Google Icon Font-Einbindung. Wenn der Icon-Font selber gehostet werden soll, dann müssen noch CSS-Angaben erfolgen. Mit weiteren Angaben wie bspw. <span class=“material-icons md-18 md-light“> lassen sich auch die Größen und die Helligkeit des Icons definieren.
Eine ausführliche Anleitung findet sich im Material Icons Guide.


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 The 50 Best Free Icon Fonts for UI Design fündig.

Fazit Icon Fonts

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 Retina-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.

Bewertungsergebnis: 4.8 / 5. | Anzahl der Bewertungen: 65

webdesign-bibliothek_hoch

Kommentare zum Artikel

17 Kommentare zu „Wie du mühelos Icon Fonts einbinden 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

  3. Toller Artikel, besonders die Schritt für Schritt Anleitung ist eine große Hilfe.
    Ich habe gelesen, dass Du den Artikel updaten möchtest. Vielleicht könntest Du auch noch einen kurzen Exkurs zum Thema „klickbare Icons“ machen, also bspw. dass ein Klick auf das Brief-Icon per „mailto:“-Befehl den Website-Besucher viel leichter und komfortabler Kontakt aufnehmen lässt.
    Ansonsten ist aber alles Top!

    1. Hallo Nicolaus,
      danke für dein Feedback.
      Exkurs ist notiert und ich schaue mal, ob und wie ich dazu bei der nächsten Überarbeitung was schreiben kann…
      Gruss
      Martin

  4. Büttner Tobias

    Wie sieht es denn mit der Datenschutzerklärung aus, muss dort nicht auch noch ein Hinweis über die Nutzung und Lizenz rein?

  5. Pingback: CSS Tutorial: Social Media Buttons - Martys Tutorials

  6. Toller Artikel. Aber eine Frage bleibt mir:
    Wenn ich Text von der Webseite kopiere, gehen die speziellen Zeichen verloren. Kann man alternativen definieren? So das beim Copy/Paste nicht der Pfeil, sondern z.B. ein * kopiert wird?

  7. Pingback: "Gedächtnisstütze" - Tower Hill

  8. Thomas A. Müller

    Wärest du so freundlich und würdest mir mitteilen, wie ich ein kleines IconBildchen mit welchem Code vergrößern kann, für ein Forum.

    Danke, Thomas

    1. Hallo Thomas,
      je nachdem wie das Bildchen eingebunden wird, kann das bspw. über die height– und width-Angabe im HTML-img-Element sein. Oder aber per CSS ebenfall über height und width oder font-size.

      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   →

Scroll to Top