Die Font-Awesome-Icons sind äusserst beliebt. Sie tauchen auf vielen Websites auf und werden immer mal wieder ergänzt. Die Einbindung auf der eigenen Website ist insbesondere mit einem Plugin nicht schwierig.
Der einfachste Weg, Font-Awesome-Icons auf der Website zu benutzen, führt über das Plugin «Font Awesome». Wenn Sie dieses kostenlos installieren, ist WordPress sofort fähig, die Icons darzustellen.
Derzeit bietet Font Awesome über 1’600 kostenlose Icons an. Unter fontawesome.com können Sie mittels (englischsprachigen) Suchbegriffen nach passenden Icons stöbern und diese auf Ihrer Website einsetzen. Es gibt auch eine PRO-Version des Fonts mit rund 8’000 Icons, der aber jährlich eine Gebühr kostet.
Besuchen Sie nun die Seite fontawesome.com und suchen Sie ein Icon aus. Wenn Sie das gewünschte Icon öffnen, führt Font Awesome sämtliche nötigen Codes auf. Beispielsweise ergibt der Code …
<i class="fas fa-user-graduate"></i>… das Icon aus, wenn Sie obigen Code ins HTML-Fenster eines Beitrags kopieren.
Wirklich einfach. Nicht?
Darüber hinaus haben Sie auch die Möglichkeit, Font-Awesome-Icons mittels CSS zu verwenden. Dafür benötigen Sie den recht kryptischen vierstelligen Code, der sich ebenfalls beim Icon auf der Font-Awesome-Website findet. Unser Beispiel von oben etwa hat den CSS-Code
\f501Vergeben Sie nun dem Textblock, Link oder Button eine CSS-Klasse. In unserem Beispiel hier nenne ich diese mal
graduate
Jetzt öffnen Sie Ihr CSS-Stylesheet unter Design/Customizer/Zusätzliches CSS und geben folgenden (natürlich beispielhaften) Code ein:
.graduate:before {
font-family: 'Font Awesome 5 Free';
content: '\f501';
}Wichtig ist, dass Sie vor dem Icon-Code unbedingt einen Backslash \ einfügen. Diesen gibt Font Awesome leider nicht vor.
Damit sollte nun jedes mal wenn die Klasse
graduate
aufgerufen wird, das Icon vorangestellt werden.
Font Awesome ohne Plugin verwenden
Sie können Font Awesome auch nutzen, ohne ein Plugin zu installieren. Hierbei verlangt jedoch Font Awesome, dass Sie sich registrieren. Die Nutzung kann aber auch auf diesem Weg kostenlos erfolgen. Bei Interesse: Unter fontawesome.com/start finden Sie eine englischsprachige Anleitung.
Alternative: Icons ganz ohne Font Awesome
Wenn Ihnen Font Awesome nicht ganz geheuer ist: Auch WordPress hat mit den «DashIcons» ein Portfolio mit hübschen Icons. Wie sie diese verwenden, erfahren Sie im Beitrag «DashIcons – die Alternative zu Font Awesome». Eine weitere Alternative sind die Google-Icons, welche wir Ihnen im Beitrag «Google-Icons einbinden und nutzen» vorstellen.
Werbung
Werbung
