1. Startseite
  2. »
  3. Allgemeine Themen & Trends
  4. »
  5. Bildhaft vermitteln durch HTML Icons: Wie geht das?

Bildhaft vermitteln durch HTML Icons: Wie geht das?

html-icons

Bildhaft vermitteln durch HTML Icons: Wie geht das?

Heutzutage nutzen viele Webseiten Icons, sodass sie inzwischen kaum noch wegzudenken sind. Sie lassen sich einfach in jeden HTML-Code einbinden. Wie Du das an Deinem Laptop bewerkstelligst, welche Methoden es gibt und weitere Beispiele stellen wir Dir in diesem Blogartikel vor.

Was HTML Icons sind

Bei HTML Icons handelt es sich um Grafiken, die man in HTML-Dokumenten verwenden kann – egal, ob Symbole, Bilder oder Schaltflächen, Icons können eine Vielzahl von unterschiedlichen Sachverhalten darstellen. So kannst Du unter anderem Symbole wie das Play- oder Pause-Symbol, ein Einkaufswagen oder ein Briefsymbol nutzen, um Deine eigene Webseite optisch aufzuwerten. Die Icons stellen daher – ähnlich zu anderen Hilfsmitteln wie HTML Grid, Slider oder Image Source – eine Gestaltungmöglichkeit innerhalb des Webdesigns dar.

Welche Vorteile sie bieten

Warum verwendet man nicht gleich Grafiken? HTML Icons bieten eine Bandbreite an Vorteilen gegenüber herkömmlichen Grafiken.

Zum einen erstellt man durch das Einfügen der Icons einen Blickfang für die Nutzer der eigenen Webseite. Hast Du zum Beispiel ein entsprechendes E-Mail-Icon an der betreffenden Stelle eingefügt, so kann das auf natürliche Weise die Aufmerksamkeit der Nutzer auf sich ziehen. Weiterhin wird Deine Webseite dadurch optisch aufgewertet.

Zum anderen brauchst Du dadurch keine unnötigen Texte einfügen. Du kannst dadurch Platz einsparen und ihn für etwas anderes verwenden. Das hat ebenfalls Auswirkungen auf das Format und die Benutzerfreundlichkeit Deiner Webseite. HTML Icons tragen daher auch für die Verbesserung eines responsiven Webdesigns bei.

In diesem Zusammenhang können sie gleichfalls helfen, Inhalte zu kategorisieren, wie beispielsweise verschiedene Dateitypen oder Kategorien von Dokumenten. Oder: Sie können auch die Navigation auf einer Website erleichtern, indem sie zur Orientierung im Menü verwendet werden.

Wie man HTML Icons verwendet

HTML Icons können auf zwei Wege in den entsprechenden Code eingefügt und programmiert werden: durch Icon-Fonts sowie durch SVG Sprites. Welche Methode Du für Dich verwendest, kannst Du selbst entscheiden. Beide zeichnen sich ebenfalls durch diverse Vorteile aus.

Warum Icon-Fonts punkten

Solltest Du Icon-Fonts nutzen, um Icons auf Deiner Webseite zu integrieren, hat das den Vorteil, dass Du weniger Speicherplatz verbrauchst. Denn: Icon-Fonts klassifiziert man als bloßen Text. Auch die Zeit zum Übertragen von Code zu Webseite ist im Vergleich zur Verwendung von SVG Sprite reduziert.

Man kann sie individuell bearbeiten. Egal, ob Du sie kleiner oder größer haben willst: Ihre Skalierung ist einfach zu handhaben, weil es sich bei Icon-Fonts in der Regel um Vektorgrafiken handelt.

Du musst sie nicht immer wieder aufs Neue im Code einstellen.

Und: als Font kannst Du sie auch innerhalb von CSS gebrauchen. Ästhetische Gestaltung – das heißt, zum Beispiel durch die Anpassung der Icon-Farbe – ist somit ebenfalls möglich.

Warum SVG-Icons punkten

Solltest Du spontan und nachträglich etwas an diesen Icons anpassen wollen, ist das immer möglich. SVG-Icons lassen sich nach Deinen Wünschen bearbeiten und gestalten, ohne, dass Du darauf achten musst, ob direkt von Anfang an alles stimmt. Ähnlich wie Icon-Fonts sind sie daher auch optimal zu skalieren.

Dasselbe gilt für die Gestaltung und Formatierung mithilfe von CSS oder SVG. Du kannst SVG-Icons durch entsprechende Eingabebefehle optisch aufwerten und verbessern.

Im Vergleich zu Icon-Fonts zeichnen sie sich weiterhin durch ihre geringeres Format aus. Und: SVG-Icons kann man im HTML-Markup einfügen.

Wie man Icons in den Code einfügt

In der Regel lassen sich Icons – egal, ob Icon-Fonts oder SVG-Icons – unkompliziert in den Quellencode integrieren. Hierfür musst Du zuerst den Eingabebefehl für ein Icon im HTML setzen. Dieser macht man mithilfe der Tags <i></i> oder <span></span>.

Danach wird die entsprechende Icon-Klasse hinzugefügt. Die Icon-Klasse beschreibt hierbei das Icon, welches am Ende auf der Webseite angezeigt werden soll. Für die Icon-Klasse kannst Du verschiedene Webseiten für kostenlos nutzbare Icon-Fonts gebrauchen.

Willst Du zum Beispiel mithilfe von Icon-Fonts einen Anker auf Deiner Webseite anzeigen lassen, kann das im entsprechenden Codeabschnitt wie folgt aussehen:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="linkzurentsprechendenWebseite"></link>

</head>
<body>

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


</body>
</html>

Ein SVG-Icon kannst Du mithilfe eines entsprechenden Vektorpfades aufbauen. Das funktioniert über den jeweiligen <svg>-Tag. Achte darauf, dass Du die entsprechenden Koordinaten zur Platzierung des späteren Icon auf der Webseite eingibst und aufpasst, dass auf der Webseite kein unnötiger Platz freigehalten wird.

Auf einen Blick

HTML Icons sind eine großartige Möglichkeit, das eigene Webdesign zu verbessern und die jeweiligen Benutzeroberflächen zu optimieren. Sie können verwendet werden, um Inhalte zu kategorisieren, um die Navigation zu erleichtern und um ein visuell ansprechendes Design zu erstellen. Man kann durch Icon-Fonts oder SVG-Icons entsprechende Icons in HTML nutzen.

FAQ zu HTML Icons

Wie füge ich Icons in HTML ein?

Bei Icon-Fonts durch den entsprechenden Icon-Tag – <i></i> oder <span></span>. Danach folgt die Icon-Klasse. Bei SVG-Icons innerhalb des entsprechenden Vektorpfades.

Was sind HTML Icons?

Dabei handelt es sich um kleine Grafiken – Symbole, kleine Bilder, etc.

Wie erhält man HMTL Icons?

Kostenlose Icons kann man sich über entsprechende Internetseiten kopieren.

Ähnliche Beiträge