Kann ich einem h6-Tag ein Icon voranstellen?
Natürlich kannst du einem `
Das Voranstellen eines Icons kann die visuelle Struktur einer Webseite verbessern und wichtige Abschnitte auf den ersten Blick erfassbar machen. Icons können aus verschiedenen Quellen stammen: Bilddateien (PNG, SVG), Unicode-Zeichen oder Icon-Fonts wie Font Awesome.
Man kann das Icon direkt im HTML als Inline-Element einfügen oder per CSS über Pseudoelemente hinzufügen. Für maximale Kontrolle empfiehlt sich eine Kombination aus HTML und CSS. Dabei ist das Inline-Icon (z. B. SVG oder `` bzw. ` `) sehr flexibel.
Das `
Die Größe des Icons wird mit `width` und `height` auf `1em` gesetzt, damit es relativ zur Schriftgröße skaliert. Das `fill` sorgt für eine attraktive Farbe.
Wenn du das Icon nicht im HTML haben möchtest, kannst du ein Unicode-Symbol oder Background-Image per CSS voranstellen. Beispiel:
Dies hat den Vorteil, dass dein HTML sauber bleibt, aber ist optisch weniger flexibel, wenn komplexere Icons gewünscht sind.
Es ist absolut möglich und häufig empfehlenswert, einem `
Wenn du weitere Fragen hast oder ein spezielles Icon-Framework einsetzen möchtest, helfe ich dir gern weiter!
