Die ideale Lösung, um Symbole auf einer Webseite anzuzeigen: Icon Fonts. Endlos skalierbar, beliebig anpassbar, flexibel. Besonders beliebt ist die Icon Schriftart Font Awesome. Wir erklären Ihnen wie Sie Font Awesome in Ihre WordPress Seite integrieren.
Warum Icon Fonts statt Bildern?
Icon Fonts haben gegenüber einzelnen Bildern mehrere Vorteile. Anstatt zahlreiche, einzelne Bilder vom Server zu laden und entsprechend für jede Grafik eine Anfrage zu senden, wird nur eine einzige Datei geladen: die Schriftart.
Außerdem sind die Icons im Gegensatz zu Bildern ohne Qualitätsverluste beliebig skalierbar und somit responsive. Damit sind sie ideal für die Anzeige auf allen Endgeräten geeignet.
Egal wie groß der Bildschirm ist, das Icon wird in top Qualität angezeigt.
Neben der größentechnischen Anpassbarkeit können Sie natürlich per CSS Ihre Icons beliebig stylen.
Die beliebte Schriftart Font Awesome manuell in WordPress integrieren.
Wie in vielen Fällen ist es auch hier nicht notwendig ein Plugin zu verwenden.
Die wohl bekannteste Icon-Schriftart ist Font Awesome mit mehr als 600 Icons für Ihre WordPress Website.
Die Vektor-Icons können mithilfe von CSS angepasst werden und fügen sich so perfekt in Ihr Design ein. Außerdem werden zahlreiche CSS-Klassen mitgeliefert, mit denen Sie die Icons zum Beispiel skalieren, animieren oder übereinander legen könnt.
Möchtet Sie Font Awesome in Ihrer WordPress Website verwenden, integrieren Sie die Schriftart am besten über den Drittanbieter BootstrapCDN.
Dafür fügen Sie einfach diesen Codeschnipsel in die functions.php Ihres Themes ein:
/* Font Awesome über CDN einbinden */
function stylesheet_von_fontawesome_einbinden() { wp_enqueue_style ('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'); } add_action('wp_enqueue_scripts', 'stylesheet_von_fontawesome_einbinden');Code-Sprache: JavaScript (javascript)Bei einem Update können Sie die Versionsnummer innerhalb der Funktion anzupassen, um die aktuellsten Icons einzubinden.
Die Icons von Font Awesome in WordPress verwenden
Möchten Sie eines der Icons nutzen, können Sie das über den <i>-Tag machen:
<i class="fa fa-whatsapp" aria-hidden="true"></i>Code-Sprache: HTML, XML (xml)Das ist zum Beispiel das WhatsApp Logo als Icon.
Welche Icons es gibt und wie deren Klassen heißen, können Sie im Font Awesome Cheatsheet finden. Anhand dieser Klassen können Sie die Icons dann auch in Ihren CSS-Stylesheet anpassen.
Wer auf seiner WordPress Website Symbole verwendet, kommt um Icon Fonts nicht mehr herum. Längst ist es überholt, jedes Icon als eigenes Bild einzubinden. Stattdessen sind Icon Fonts eine gute Lösung.
Sie haben Fragen oder Anregungen zum Thema WordPress? Wir freuen uns auf Ihr Feedback.
