CSS/Tutorials/Icon-Fonts

10min

leicht

SVG/Tutorials/Icons

In diesem Tutorial lernen Sie, wie Sie Icons nicht mit eigenen Grafiken, sondern mit Sonderzeichen, die in einem eigenen Zeichensatz geladen werden, darstellen können.

Empfehlung: Dieser Artikel wurde 2014 geschrieben. Heute werden Icons - gerne auch mehrfarbig - idealerweise mit SVG realisiert.

• SVG/Tutorials/Icons

--Matthias Scharwies (Diskussion) 04:29, 10. Feb. 2023 (CET)

Nachteile von herkömmlichen Grafiken

Bei der Verwendung von Rastergrafiken besteht jedes Icon aus einem eigenen Bild. Sie können zwar in einem Sprite zusammengefasst werden; nachträgliche Änderungen müssen jedoch mit einem Bildbearbeitungsprogramm an jeder Grafik einzeln vollzogen werden.

Gerade bei hochauflösenden Bildschirmen sehen die üblicherweise eher kleinen Icons unscharf und pixelig aus.

Icon-Fonts haben dagegen mehrere Vorteile:

• Sie bestehen aus reinem Text und benötigen so wenig Speicherplatz und Übertragungszeit.
• Sie sind Vektorgrafiken, können also auf jede beliebige Größe skaliert werden.
• Sie bestehen nur aus einer Datei, benötigen also nur einen HTTP-Request.
• Sie sind ein Font – der mit CSS leicht in Größe, Farbe und Form geändert werden oder einen Schatten erhalten kann.

Verwendung des Icon-Fonts font-Awesome

Die Icons in der Navigation, vor den Listenelementen und grafischen Elemente wie die Lupe in den Suchfeldern werden nicht mit Hintergrundbildern, sondern mit einer Schriftart, die statt Buchstaben diese Icons enthält, verwirklicht. Dies hat den Vorteil, dass die Darstellung der Icons in jeder Größe sowohl auf dem kleinsten Smartphone-Display als auch auf einem 4k-Monitor immer gestochen scharf aussieht.

Der Font wird über ein eigenes Stylesheet geladen und dann über vordefinierte Klassen aufgerufen.

Für das Icon wird ein leeres i-Element mit der passenden Klasse aufgerufen. Dies ist zwar semantisch nicht korrekt und mit einer Vielzahl von Klassendefinitionen verbunden, bringt aber gegenüber anderen Varianten, etwa dem Formatieren von Pseudoelementen oder der Definition einer Hintergrundgrafik, Flexibilität bei einer eventuellen Änderung des HTML mit sich und lässt sich einfacher per CSS selektieren.

Einsatz von icon-fonts für Navigationslisten

<nav>
  <ul>
    <li>
      <a href="index.html"><i class="fa fa-fw fa-home"></i> Startseite</a>
    </li>
    <li>
      <a href="1-unterseite.html"><i class="fa fa-fw fa-user"></i> Mitglied werden</a>
    </li>
  </ul>
</nav>

Font Awesome erzeugt die Icons daraufhin aus einem speziellen Font, dessen Zeichen im „Private Use“ Bereich der Unicode-Basisebene liegen und daher nur als CSS-Hexsequenzen darstellbar sind. Die folgenden Regeln sind ein Ausschnitt aus font-awesome.css:

.fa {
  font-family: FontAwesome;
}
.fa-fw { /* symbole mit fester Breite */
  text-align: center;
  width: 1em;
}
.fa-home::before {
  content: "\f015";  /* Haus */
}
.fa-user::before {
  content: "\f007"; /* stilisierte Figur */
}

Hier werden den Listeneinträgen Symbole vorangestellt, alle Icons finden Sie unter http://fortawesome.github.io/Font-Awesome/icons/ ebenso wie ausführliche Beispiele

Empfehlung: Binden Sie die font-Awesome-Stylesheets direkt im head mit dieser Zeile ein:

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

Beachten Sie: Viele CDN-Server befinden sich außerhalb Deutschlands und unterliegen damit ggf. deutlich geringeren Datenschutzbestimmungen. Der Betreiber des CDN erfährt auf diese Weise von den Besuchen Ihrer Seiten und erhält Daten Ihrer Benutzer.

i steht nicht für Icon - semantisch korrekte Auszeichnung?

Das Verwenden des i-elements für Icons ist eine Konvention, die durch Bootstrap popularisiert wurde. Wiederverwendbare Bibliotheken wie FontAwesome arbeiten aus guten Gründen so. Sie zielen darauf ab, dass man nur die vorgefertige CSS-Datei und für jedes Icon ein HTML-Snippet einbinden muss.

Ein leeres Element für Icons zu verwenden, bringt gegenüber direktem :after/:before { content: '☺' } Flexibilität mit sich. Das Icon lässt sich durch Änderung des HTML beliebig positionieren. Es ist von den Styles des Elternelements unabhängig, dadurch ist es robuster. Es kann mit CSS-Selektoren einfacher angesprochen werden (z.B. .parent .icon statt .parent:after/.parent:before). Das Icon ist somit in HTML und CSS ein eigenständiges, beliebig kombinierbares Modul.

Klassen, die die Elemente direkt bekommen (z.B. <a href="" class="icon icon-smiley icon-before">) würden Konflikte vorprogrammieren. Styles des Elements würden die für das Icon nötigen Styles überschreiben. Oder anders herum: Icon-Styles würden :before/:after-Styles des Elements überschreiben. Das kommt in der Praxis ständig vor.

Es ist nur folgerichtig, was Font Awesome da tut. Es ist nicht die sauberste Lösung, sondern die einfachste und robusteste. Natürlich lässt sich das besser machen. Spezifische Lösungen sind immer kürzerer und sauberer, aber sie kosten. Alle Beteiligten müssen genau wissen, was sie tun, alle Beteiligten müssen vorsichtig sein und Konflikte vermeiden. Aus Sicht der Software-Entwicklung sind solche fragilen Lösungen immer problematisch.

Natürlich steht i nicht für Icon, aber ein leeres span wäre genauso gut/schlecht wie ein leeres i. Da ist ein i wiedererkennbarer, weil man es sonst so gut wie nie verwendet.

Fazit

Icon-fonts sind ein interessanter Ansatz einheitliche Icons einzusetzen, der für kleinere Webpräsenzen aber wohl doch zu aufwendig ist.

SVG-Icons zeichnen sich gegenüber kleinen Grafiken oder Icon-Fonts durch viele Vorteile aus, da sie

• jederzeit direkt bearbeiten werden können
• als Vektorgrafiken immer gestochen scharf skalierbar sind
• durch CSS und mit den Möglichkeiten von SVG mehrfarbig gestaltet, mit Filtern verändert und sogar animiert werden können.
• ebenfalls in Sprites zusammengefasst werden können

Weblinks

• Font-Awesome
• icomoon
• ionicons