• Zur Hauptnavigation springen
  • Skip to main content
  • Zur Fußzeile springen
Againstmedia

Againstmedia

Der Pegasus unter den Schafen

  • Über Uns
  • Unsere Leistungen
  • Unsere Arbeit
  • Referenzen
  • Blog
  • Kontakt
Aktuelle Seite: Startseite / Wissen / So binden Sie Font Awesome auf Ihrer Website ein
Mögliche durch CSS Klassen gesteuerte Größen der Icons

So binden Sie Font Awesome auf Ihrer Website ein

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.

(c) Font Awesome

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.

(c) Font Awesome

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.

  • Auf Twitter teilen
  • Auf Facebook teilen
  • Auf Pinterest teilen
  • Auf LinkedIn teilen
  • Teilen via Reddit
  • Per E-Mail teilen

Stichworte: Update, Website

Bereit für den nächsten Schritt?

Againstmedia entwickelt individuelle Lösungen, die Ihre Marke aufwerten und Ihr Geschäft aufbauen.

🤙🏻Anruf
WhatsApp

Unsere letzten Artikel

Videos komprimieren mit dem VLC Player

Custom Post Type für WordPress im Atom Editor

Custom Post Type in Genesis Child Themes

Editor mit geöffneter functions.php bereit zum Bearbeiten

Admin Account über die functions.php hinzufügen

Unsere Leistungen

Wir erstellen Ihre Website ,Ihren Online Shop oder die auf Conversions optimierte Landing Page für Ihr Produkt oder Dienstleistung
—
Technisches SEO – Unsere Maßnahmen für eine technisch optimierte Website
—
Social Media Marketing – Kampagnen und Inhalt inkl. Erstellung
—
Online Marketing – SEA Suchmaschinen Werbung – Email Marketing
—
Druckprodukte wie Flyer, Briefpapier und Visitenkarten 
—
Erstellung von Logo, Marke und Identität Ihres Unternehmens

Footer

  • Website und Webshop
  • SEO
  • Online Marketing
  • Social Media Marketing
  • Corporate Design
  • Druckprodukte
  • Telefon
  • E-Mail
  • Facebook
  • Instagram
  • GitHub
Sofortkontakt👩🏼‍💻
  • FAQ
  • Impressum
  • Datenschutz
  • Cookie-Richtlinie
Einwilligung ändern

© 2017–2023
Againstmedia GmbH
#incrediblesupport