HTML-Icons einfügen: So einfach geht’s

Welcher HTML-Code wird zum Einfügen von Icons verwendet?

Icons sind ein wesentlicher Bestandteil des modernen Webdesigns, da sie Inhalte visuell bereichern und die Benutzerfreundlichkeit verbessern können. Um ein Icon in deine HTML-Seite einzufügen, musst du Folgendes tun:

Attribute zum Einfügen von Icons

Du verwendest das <i>-Element, um ein Symbol zu definieren. Es verfügt über die folgenden Attribute:

• class: Weist eine Klasse aus einer Icon-Bibliothek zu.
• style: Anwenden von CSS-Stilen auf das Icon.
• aria-hidden: Bietet Barrierefreiheit, indem das Icon für Bildschirmlesegeräte ausgeblendet wird.

Beispiel

Um beispielsweise das FontAwesome-Symbol für "Home" einzufügen, verwendest du den folgenden Code:

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

Schriftbasierte vs. Bildbasierte Icons

Es gibt zwei Haupttypen von Icons:

Schriftbasierte Icons:

• Verwendet eine Schriftart, um Symbole zu rendern.
• Skalieren auf jede Größe ohne Qualitätsverlust.
• Einfache Änderung der Farbe und des Stils über CSS.

Bildbasierte Icons:

• Sind Grafikdateien (z. B. PNG, SVG).
• Begrenzte Skalierbarkeit.
• Größere Dateigrößen.

Auswählen des richtigen Dateiformats für Web-Icons

Die Wahl des Dateiformats hängt von deinen spezifischen Anforderungen ab:

• SVG (Scalable Vector Graphics): Skalierbar, qualitativ hochwertig, aber kann von älteren Browsern nicht unterstützt werden.
• PNG (Portable Network Graphics): Weit verbreitet, unterstützt von allen gängigen Browsern, aber nicht skalierbar.
• ICO (Icon-Datei): Spezielles Dateiformat für Symbole, das von allen Browsern unterstützt wird.

Du solltest eine Kombination aus verschiedenen Formaten verwenden, um optimale Ergebnisse zu erzielen.

Was sind die häufigsten Formate für Web-Icons?

Als Webentwickler stößt du auf eine Vielzahl von Icon-Formaten. Die Wahl des richtigen Formats hängt von deinen spezifischen Anforderungen ab, wie z. B. Dateigröße, Kompatibilität und Anpassungsfähigkeit.

SVG (Skalierbare Vektorgrafik)

SVG ist ein XML-basiertes Format, das die Erstellung skalierbarer Vektorgrafiken ermöglicht. SVG-Icons sind hochauflösend und können ohne Qualitätsverlust beliebig vergrößert oder verkleinert werden. Dies macht sie zu einer hervorragenden Wahl für reaktionsschnelle Websites und Apps. Zudem unterstützen SVGs Animationen und Interaktivität, sodass du dynamische und ansprechende Icons erstellen kannst.

PNG (Portable Network Graphics)

PNG ist ein rasterbasiertes Format, das verlustfreie Komprimierung unterstützt. PNG-Icons bieten eine hohe Bildqualität und eignen sich gut für einfache und detaillierte Designs. Sie werden häufig in Websites und Apps verwendet, da sie von allen gängigen Browsern unterstützt werden.

JPEG (Joint Photographic Experts Group)

JPEG ist ein rasterbasiertes Format, das eine verlustbehaftete Komprimierung verwendet. JPEG-Icons sind in der Regel kleiner als PNG-Icons, weisen aber eine geringere Bildqualität auf. Sie eignen sich am besten für Icons, die nicht viel Detail aufweisen oder eine geringe Dateigröße erfordern.

ICO (Icon-Datei)

ICO ist ein Windows-spezifisches Dateiformat, das zum Speichern von Symbolen und kleinen Bildern verwendet wird. ICO-Icons werden häufig für Desktop-Anwendungen und Webseiten-Favicons verwendet. Sie können mehrere Auflösungen enthalten, wodurch sie auf verschiedenen Geräten und Bildschirmen gut aussehen.

Andere Formate

Neben den oben genannten Formaten gibt es noch weitere Optionen, die für bestimmte Verwendungszwecke geeignet sind:

• GIF (Graphics Interchange Format): Ein verlustfreies Format, das Animationen unterstützt.
• WebP: Ein von Google entwickeltes Format, das eine verbesserte Komprimierung gegenüber PNGs und JPEGs bietet.
• Font Icons: Vektoricons, die als Schriftart gespeichert sind und eine einfache Skalierbarkeit und Anpassung ermöglichen.

Wie füge ich Icons aus einer Bibliothek ein?

Du kannst unzählige Icon-Bibliotheken online finden, die dir eine breite Palette von Symbolen in verschiedenen Stilen und Formaten zur Verfügung stellen. Diese Bibliotheken erleichtern das Einfügen von Icons in deine HTML-Dokumente.

Vorgehensweise

1. Wähle eine Icon-Bibliothek:

   • Font Awesome: Eine beliebte Bibliothek mit über 6000 kostenlosen und kostenpflichtigen Icons, die als Schriftart bereitgestellt werden.
   • Material Design Icons: Googles Bibliothek mit über 2000 Materialdesign-Icons.
   • Boxicons: Eine wachsende Sammlung von über 800 kostenlosen und kostenpflichtigen Icons.

2. Lade die Bibliothek herunter:

   • Navigiere zur Website der gewählten Bibliothek.
   • Lade die Schriftart- oder CSS-Datei herunter, die deiner gewünschten Icon-Version entspricht.

3. Füge die Bibliothek zu deinem HTML-Code hinzu:

   • Füge den heruntergeladenen Code zwischen den <head>-Tags auf deiner HTML-Seite ein.
   • Stelle sicher, dass du den korrekten Pfad zur CSS- oder Schriftartdatei angibst.

4. Verwende die Icons in deinem Code:

   • Erstelle ein HTML-Element (z. B. <i> oder <span>) für jedes Icon.
   • Füge dem Element die entsprechende Icon-Klasse hinzu.
   • Verwende gegebenenfalls zusätzliche CSS-Stile, um die Größe, Farbe oder Positionierung des Icons anzupassen.

Beispiel

Angenommen, du möchtest das Symbol "Home" aus der Font Awesome-Bibliothek einfügen:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
</head>
<body>
  <i class="fas fa-home"></i>
</body>
</html>

Vorteile der Verwendung von Icon-Bibliotheken

• Zugriff auf eine große Auswahl an Icons: Bibliotheken bieten Tausende von Icons in verschiedenen Stilen und Formaten.
• Konsistenz: Die Verwendung von Icons aus derselben Bibliothek stellt eine einheitliche Erscheinungsbild über deine Website hinweg sicher.
• Zeitersparnis: Der Zugriff auf vorgefertigte Icons spart Zeit und Mühe bei der Suche und Erstellung eigener Symbole.
• Skalierbarkeit: Icons aus Bibliotheken sind in der Regel für verschiedene Bildschirmgrößen und Auflösungen optimiert.

Wo finde ich kostenlose und hochwertige Icon-Ressourcen?

Die Wahl der richtigen Icon-Ressource kann über die Qualität und den Gesamteindruck deiner Website entscheiden. Hier sind einige zuverlässige Quellen, um kostenlose und qualitativ hochwertige Icons zu finden:

Kostenlose Online-Bibliotheken

• Font Awesome: Eine umfangreiche Bibliothek mit über 1.600 Icons in verschiedenen Stilen und Formaten, die du kostenlos nutzen kannst.
• Material Design Icons: Eine Bibliothek von Google, die über 3.000 moderne und minimalistische Icons bietet, die perfekt für Websites und Apps sind.
• Ionicons: Eine Sammlung von über 700 skalierbaren und plattformübergreifenden Icons, die sich ideal für mobile Anwendungen eignen.

Bezahlte Online-Bibliotheken

Für eine noch größere Auswahl und Premium-Funktionen kannst du auch bezahlte Icon-Bibliotheken in Betracht ziehen:

• Noun Project: Eine riesige Sammlung von über 3 Millionen Icons, die von einer Community von Designern erstellt wurden.
• Iconfinder: Eine Plattform mit über 5 Millionen Icons, die du nach Stil, Größe und Farbe filtern kannst.

Open-Source-Plattformen

Wenn du einzigartige und benutzerdefinierte Icons benötigst, kannst du Open-Source-Plattformen erkunden, auf denen Designer ihre Werke kostenlos teilen:

• Flaticon: Eine umfangreiche Sammlung von über 2 Millionen kostenlosen und bearbeitbaren Icons.
• Iconmonstr: Eine Community-basierte Plattform, die eine Vielzahl von kostenlosen SVG-Icons anbietet.

Tipps zur Suche nach hochwertigen Icons

• Achte auf die Lizenz: Stelle sicher, dass du die Icons gemäß den Lizenzbedingungen verwenden kannst.
• Überprüfe die Qualität: Vermeide Icons mit geringer Auflösung oder unscharfen Details.
• Wähle den richtigen Stil: Wähle Icons aus, die zum Stil und der Ästhetik deiner Website passen.
• Beachte die Größe: Wähle Icons in der richtigen Größe, um eine Verzerrung oder Unschärfe zu vermeiden.
• Optimiere für die Anzeige: Wähle Icons, die für verschiedene Geräte und Bildschirmgrößen optimiert sind.

So fügst du benutzerdefinierte Icons in deine Website ein

Sobald du ein geeignetes benutzerdefiniertes Icon im bevorzugten Format hast, kannst du es in deine Website einfügen. Hier sind die Schritte:

Konvertiere dein Icon in ein Web-Format

Falls dein benutzerdefiniertes Icon nicht in einem gängigen Web-Format vorliegt, musst du es zuerst konvertieren. Es gibt verschiedene Online-Tools und Software, die du dafür verwenden kannst, wie z. B. Convertio oder ImageOptim.

Lade dein Icon auf deinen Webserver hoch

Lade dein konvertiertes Icon in ein Verzeichnis auf deinem Webserver hoch. Verwende einen aussagekräftigen Dateinamen, damit du es später leicht identifizieren kannst.

Verwende HTML, um das Icon zu referenzieren

Verwende das <img>-Element, um auf dein benutzerdefiniertes Icon zu verweisen. Das src-Attribut sollte auf die URL des Icons auf deinem Webserver verweisen. Du kannst auch die Attribute alt und title verwenden, um zusätzlichen Text für Barrierefreiheit und SEO hinzuzufügen.

<img src="images/mein-benutzerdefiniertes-icon.png" alt="Mein benutzerdefiniertes Icon" title="Mein benutzerdefiniertes Icon">

Passe die Größe und den Stil des Icons an

Du kannst die Größe und den Stil deines benutzerdefinierten Icons mit CSS anpassen. Verwende die Eigenschaften width, height, margin und padding, um die Positionierung und das Erscheinungsbild des Icons zu kontrollieren.

img.mein-benutzerdefiniertes-icon {
  width: 32px;
  height: 32px;
  margin: 10px;
  padding: 5px;
  border: 1px solid #ccc;
}

Zusätzliche Tipps

• Verwende für deine benutzerdefinierten Icons beschreibende Dateinamen, um die Barrierefreiheit zu verbessern.
• Optimiere deine Icons für die Webnutzung, um die Ladezeiten zu verkürzen.
• Verwende eine Icon-Bibliothek, um Konsistenz und schnellen Zugriff auf eine Vielzahl von Symbolen zu gewährleisten.

Best Practices für die Verwendung von Icons in HTML

Bei der Verwendung von Icons im HTML-Code sind einige Best Practices zu beachten, um sicherzustellen, dass sie effektiv und zugänglich sind:

Konsistenz und Stil

• Verwende durchgängig den gleichen Icon-Stil auf deiner Website.
• Achte darauf, dass die Icons zur Gesamtästhetik deiner Website passen.

Größe und Skalierbarkeit

• Wähle die richtige Größe für deine Icons, abhängig vom Kontext und dem Layout deiner Website.
• Verwende skalierbare Vektorgrafiken (SVGs), um sicherzustellen, dass deine Icons bei unterschiedlichen Bildschirmgrößen scharf bleiben.

Semantik und Alt-Text

• Verwende semantische Icon-Namen, die ihren Zweck deutlich machen (z. B. "search-icon" statt "icon-1").
• Füge einen beschreibenden Alt-Text hinzu, um die Informationen des Icons für Bildschirmlesegeräte und Suchmaschinen bereitzustellen.

Barrierefreiheit

• Achte darauf, dass deine Icons für Menschen mit Behinderungen zugänglich sind.
• Verwende kontrastreiche Farben und vermeide es, sich ausschließlich auf die Farbe für die Bedeutung zu verlassen.
• Biete alternative Textbeschreibungen für Icons.

Kompatibilität mit Browsern

• Teste deine Icons auf verschiedenen Browsern und Geräten, um die Kompatibilität sicherzustellen.
• Berücksichtige ältere Browser, die möglicherweise keine modernen Icon-Formate unterstützen.

Performance

• Optimiere deine Icons für die Ladezeit, indem du sie komprimierst und die Dateigröße minimierst.
• Vermeide es, zu viele Icons auf einer Seite zu verwenden, da dies die Seitenladezeit verlangsamen kann.

Lizenzen und Urheberrecht

• Vergewissere dich, dass du die Lizenzbedingungen für alle Icon-Ressourcen, die du verwendest, einhältst.
• Gebe den Autoren der Icons Anerkennung, wenn dies erforderlich ist.

Fehlerbehebung bei Problemen beim Einfügen von Icons

Wenn du Probleme beim Einfügen von Icons auf deiner Website hast, sind hier einige häufige Fehlerquellen und Möglichkeiten zur Behebung:

Falscher HTML-Code

• Überprüfe den Code: Stelle sicher, dass du den richtigen HTML-Code zum Einfügen des Icons verwendest. Verwende den in Abschnitt "Welcher HTML-Code wird zum Einfügen von Icons verwendet?" beschriebenen Code.
• Überprüfe den Dateipfad: Stelle sicher, dass der Dateipfad zum Icon korrekt ist. Er sollte auf die tatsächliche Position des Icon-Bildes verweisen.

Problem mit dem Icon-Format

• Überprüfe das Format: Vergewissere dich, dass das Icon im richtigen Format vorliegt, z. B. PNG, SVG oder ICO.
• Verwende einen Online-Konverter: Wenn du das Icon nicht im richtigen Format hast, kannst du einen Online-Konverter verwenden, um es zu konvertieren.

Probleme mit der Icon-Bibliothek

• Aktualisiere die Bibliothek: Stelle sicher, dass du die neueste Version der Icon-Bibliothek verwendest. Veraltete Bibliotheken können zu Kompatibilitätsproblemen führen.
• Überprüfe die Lizenzbedingungen: Einige Icon-Bibliotheken haben bestimmte Lizenzbedingungen. Stelle sicher, dass du sie einhältst, bevor du die Icons verwendest.

Fehler bei benutzerdefinierten Icons

• Überprüfe die Imagenamen: Stelle sicher, dass der Name der Icon-Datei mit dem Namen im HTML-Code übereinstimmt.
• Überprüfe den Dateispeicherort: Vergewissere dich, dass die Icon-Datei im richtigen Verzeichnis auf deinem Server gespeichert ist.

Sonstige Fehler

• Überprüfe die Konsole: Öffne die Konsole deines Browsers (normalerweise durch Drücken von F12) und suche nach Fehlermeldungen oder Warnungen im Zusammenhang mit den Icons.
• Deaktiviere Browser-Erweiterungen: Manchmal können Browser-Erweiterungen die Anzeige von Icons beeinträchtigen. Deaktiviere sie vorübergehend, um zu sehen, ob das Problem dadurch behoben wird.
• Lösche den Cache und die Cookies: Lösche den Cache und die Cookies deines Browsers. Dies kann helfen, beschädigte Daten zu entfernen, die Probleme verursachen können.