So awesome wie ihr Name sind die kleinen Dinger wirklich. Denn bei FontAwesome handelt es sich um eine Sammlung verschiedenster kleiner Icons, die deinen Inhalt gehörig aufpeppen können. Eingesetzt werden sie dabei am liebsten bei Landingpages und in der Menüführung.
Sie können dem Warenkorb eines Onlineshops zum Beispiel einen Einkaufskorb verpassen und die Kasse mit einem Eurozeichen verzieren. Dein Besucher hat dadurch den Vorteil, schnell zu finden, was er sucht.
Auf der anderen Seite können zum Beispiel die Blöcke einer Landingpage durch sie aufgehübscht werden. Unter dem Strich sind die dir gebotenen Möglichkeiten nur durch deinen Einfallsreichtum begrenzt. Denn selbst die Auswahl der Icons geht in den hohen vierstelligen Bereich und lässt damit kaum einen Wunsch offen.
FontAwesome ist eine Iconsammlung, die auf einer Schriftart basiert
Und damit haben wir hier genau dasselbe Problem, wie im Fall von Google Fonts. Bindest du sie nicht über deinen eigenen Webspace lokal ein, werden Daten an fremde Server übermittelt. Das verlangsamt nicht nur die Ladezeit deiner Seite, sondern ist auch in puncto DSGVO ein großes Problem.
Auf der anderen Seite bietet FontAwesome eine Menge Vorteile, sodass es wirklich Sinn macht, sie einzusetzen (dann aber eben lokal von dir selbst gehostet):
- Du ersetzt damit kleine Grafiken, die nicht nur mehr Speicherplatz, sondern auch mehr Traffic brauchen.
- Die kleinen Icons kannst du in unterschiedlichen Größenformaten darstellen lassen, ohne ihnen dabei zu viel Qualität zu nehmen. Sie verpixeln nicht!
- Da es sich um eine Schrift handelt, kannst du die Farbe der Icons nach Belieben ändern.
Legen wir also los! So bindest du FontAwesome selbst ein
Zuerst natürlich das Übliche: Mache ein Backup deiner Seite!
Von der offiziellen FontAwesome Website lädst du dir die Iconschrift herunter. Dazu gehst du zunächst auf „Start for Free“ und wählst hier dann unter „Other Ways to Use“ den Downloadlink aus.
Sobald du die Datei heruntergeladen hast, öffnest du sie. Es handelt sich dabei um eine .zip-Datei, in deren Ordner Webfonts du die Datei all.css findest.
Mit FTP verbindest du dich auf den Server deiner Webseite. Dort wählst du den Fonts-Ordner in deinem Theme aus, erstellst hierin den Ordner fontawesome und hierin einen mit dem Titel css. In diesen legst du die besagte Datei ab.
Anschließend öffnest du von deinem Theme die Header-Datei, diese lautet auch header.php. Hierin fügst du folgenden Code ein:
<link href=“https://www.deinblog.de/themes/deintheme/fonts/fontawesome/css/all.css” rel=”stylesheet”>Achte darauf, dass du diesen innerhalb des Bereichs <head></head> platzierst!
Sobald du nun aus der umfangreichen Bibliothek von FontAwesome auswählst, werden die Icons automatisch angezeigt.
So vergrößerst du deinen Icon
Wenn du die Bibliothek anstelle eines Plugins nutzt (das geht im Fall von WordPress natürlich auch, nur musst du auch hier auf die lokale Einbindung achten), musst du die Größe immer manuell anpassen.
Der Standardcode sieht so aus: <i class=“fas fa-icon“></i>
Soll die zweifache Größe angewendet werden, schreibst du noch fa-2x dazu und erhältst damit <i class=“fas fa-icon fa-2x“></i> als Ergebnis. Eine dreifache Vergrößerung funktioniert mithilfe von fa-3x und eine vierfache demnach mit fa-4x.
FontAwesome als Plugin nutzen
Willst du das Ganze nicht manuell durchführen, sondern stattdessen ein Plugin nutzen, kannst du das offizielle Plugin dafür nutzen. Es ist allerdings einiges an Arbeit nötig, um hier eine Konformität mit der DSGVO zu gewährleisten. Daher ist die zuvor beschriebene Variante zu empfehlen, damit du auf der sicheren Seite bist.
