So betten Sie einen Iconfont in ihr HTML-Dokument ein
Wie im Grundlagenartikel "Iconfonts – Webdesign mit vektorbasierten Piktogrammen" beschrieben handelt es sich bei Iconfonts um vektorbasierte Schriftarten, die statt Buchstaben funktionale Piktogramme enthalten. Webentwickler, die sich dazu entscheiden, Iconfonts zu nutzen, profitieren in vollem Umfang von den Vorteilen frei skalierbarer Vektoren. Im Gegensatz zu Pixelfonts werden Vektorfonts unabhängig vom Ausgabegerät in grafischen Primitiven wie Linien, Kreisen, Polygonen oder Kurven definiert. Dies ermöglicht eine bequeme und verlustfreie Transformation auf Basis von CSS. Entsprechende Icons müssen so nicht separat in ein Grafikprogramm geladen und angepasst werden. Stattdessen erfolgt die Formatierung codebasiert im Webbrowser. Dazu muss eine dem Iconfont zugrunde liegende CSS-Datei im HTML-Header eingebunden werden. Einzelne Icons lassen sich anschließend durch das HTML-Attribut „class“ in die Webseite integrieren. Wie das funktioniert, zeigen wir im Folgenden beispielhaft für den beliebten Open-Source-Font Font Awesome.
Icons mit Font Awesome einbetten
Mit mehr als 600 Icons ist Font Awesome eine der größten Sammlungen vektorbasierter Symbole. Sie steht als piktografische Schrift kostenlos zur Verfügung. Um den Iconfont in eine Webseite einzubetten, benötigen Webentwickler das Installationspaket. Dieses steht auf der Font-Awesome-Website zum Download bereit. Die Integration des Iconfonts erfolgt in drei Schritten:
1. Download des Installationspakets
2. Einbindung des Stylesheets in den Header des gewünschten HTML-Dokuments: Um Font Awesome in eine Webseite einzubinden, muss das entsprechende HTML-Dokument mit der im Installationspaket enthaltenen Standard-CSS-Datei „font-awesome.min.css“ verknüpft werden. Dazu wird folgender Code in den HTML-Header eingebettet:
| <link rel="stylesheet" href="https://www.ionos.de/digitalguide/path/to/font-awesome/css/font-awesome.min.css"> |
Der Platzhalter "path/to/" steht stellvertretend für den Dateipfad des Webprojekts auf dem Server.
3. Icons einbetten: Ist der Bezug zur CSS-Datei hergestellt, lassen sich die im Iconfont beschriebenen Piktogramme an beliebiger Stelle des HTML-Quellcodes einbinden. Dazu kommt bei Font Awesome ein leeres i-Element in Kombination mit dem class-Attribut zum Einsatz. Die Klassen ergeben sich aus dem CSS-Präfix „fa“ und dem jeweiligen Icon-Namen:
| <i class="fa fa-home"></i> |
Der Einbettungscode eines jeden Icons lässt sich der Font-Awesome-Website entnehmen.
Alternativ zum i-Element kann ein Icon auch über ein semantisch leeres span-Tag eingebettet werden.
Besitzt Ihre Webseite schon ein Favicon? Mit dem Favicon-Generator von IONOS können Sie sich kostenlos Ihr eigenes Homepage-Logo erstellen.
Ähnliche Artikel
Iconfonts – Webdesign mit vektorbasierten Piktogrammen
Nutzen Sie einen Iconfont, um funktionale Piktogramme auf Vektorbasis in Ihre Webseite einzubinden. Gegenüber klassischen Pixelbildern haben Vektorgrafiken den Vorteil, dass sie sich ohne Qualitätsverlust beliebig skalieren lassen. Zudem bietet die Einbindung über CSS (Cascading Style Sheets) weitreichende Möglichkeiten der einfachen codebasierten Ausgestaltung. Zahlreiche Open-Source-Projekte…
Typografie im Responsive Webdesign - Teil 1: Grundlagen
Das Internet bietet zahlreiche Texte mit unterschiedlichsten Schriftarten. Die Verbreitung des Responsive Webdesigns wirkt sich auch auf die Webseiten-Typografie aus. Schließlich sollte sich die Schriftdarstellung stets dem Bildausschnitt des verwendeten Geräts anpassen. Reaktionsfähige Typografie muss bei der Darstellung flexibel sein und entsprechende Schriftfonts nutzen. Wir geben Ihnen einen…
Typografie im Responsive Webdesign - Teil 2: Geeignete Schriftarten
Die Auswahl an Webschriften hat sich mit der Einführung von Webfonts gewaltig erhöht. Viele dieser Schriftarten lassen sich kostenlos herunterladen. Dank ihrer Anpassungsfähigkeit eignen sie sich perfekt fürs Responsive Webdesign – die Schrift Ihrer Webseiten passt sich den Anforderungen der Endgeräte an. Verschiedene Internet-Plattformen bieten reaktionsfähige Webfonts an, die Sie schon mit…
Typografie im Responsive Webdesign - Teil 3: Technische Umsetzung mit CSS
Im Responsive Webdesign ist die Typografie ein häufig vernachlässigtes Feld, obwohl die Gestaltung einer anpassungsfähigen Schrift kein Expertengeheimnis ist. Wie lässt sich diese realisieren? Und welche Webfonts taugen für ein responsives Schriftbild? Wir geben Ihnen einen Einblick in die technische Umsetzung reaktionsfähiger Webtypografie und wie Sie diese über CSS in Ihren Webauftritt…
WordPress: Icons einfügen einfach erklärt
Mit Icons wird Ihre WordPress-Seite nicht nur aufgelockert, sondern auch einfacher zu navigieren. Insbesondere Icon Fonts bieten viele Vorteile und überzeugen durch zahlreiche verschiedene Piktogramme für jeden Einsatzzweck. Wir erklären Ihnen, was Icon Fonts sind, wie Sie bei WordPress Icons einfügen und wo Sie die Symbole finden.
