Font Awesome

Es gibt sehr viele Icon Sets, welche Web Icon in allen Variationen beinhalten. I. d. R. sind diese Icons lizenzsiert und müssen einen Backlink zum Author, oft direkt am Icon-Symbol, enthalten.

Ein häufig genutztes Angebot ist „Font Awesome„. Es enthält über 1600 Icons in zahlreichen Kategorien, so dass man im Prinzip fündig wird.

Zur Startseite von Font Awesome…

Die Icons lassen sich in Websites, als Printversion für Ausdrucke und als Programm-Icons nutzen.

Die Icons können z. B. als CSS-Code in eine Website eingefügt werden. Im einfachsten Fall wird der Server des Herstellers als Quelle benutzt, was aber nicht DSGVO-konform ist (Daten werden in die USA übertragen). Besser ist eine lokale Einbindung der Icons, wie hier beschrieben.

In diesem Beispiel suchen wir ein ZIP-Icon für eine Website. In die Suchmaske „zip“ eingeben und auf die Lupe klicken:

 

Es wurden 4 Icons gefunden, wobei die ausgegrauten Icons nur in der kostenpflichtigen Pro-Version verfügbar sind. Wir klicken auf das zweite Symbol…

 

…und sehen in dieser Zeile den passenden HTML-Code zum Kopieren in die Website:

Um die Größe zu ändern, kann ein weiterer Wert hinzugefügt werden.
Beispiel:

<i class="far fa-file-archive fa-3x"></i>

„fa-3x“ entspricht der dreifachen Größe des Icons.

 

Hinweis:
Wenn dieser Code in eine Seite oder einen Beitrag kopiert wird (nur im HTML-Modus), löscht ihn WordPress beim Speichern.  Für diesen Fall ist ein zusätzliches Plugin erforderlich.
Beispiele:
Insert PHP Code Snippet…
PHP Everywhere…

 

Alternativ kann das Icon als SVG heruntergeladen werden:

 

Bei der Verwendung als SVG-Datei ist die Lizenz CC 4.0 als Link (z. B. im Impressum, bei den Bildnachweisen usw., anzugeben:

Regulär kann kein SVG-Bild in die Mediathek hochgeladen werden. Mit der Installation dieses Plugins geht es ohne Probleme.

Mit diesem Tool lassen sich SVG-Dateien online skalieren.