Icons können eine Webseite verschönern oder auch zur Zugänglichkeit beitragen.

Ein Bild sagt mehr als tausend Worte.

Diese Bilder sind meist im SVG (scaleable vector graphics) Format und können durch Bibliotheken wie z.B.: „Font Awesome“ eingebunden werden.

Neben vorgefertigten Icon Bibliotheken kann man aber auch selbst eine zusammenstellen und eigene SVG Grafiken (siehe Beitragsbild) hinzufügen.

Dafür nutze ich die Webseite IcoMoon, auf der man mit Hilfe einer „App“ eigene Icons aus verschiedenen Bibliotheken zusammensuchen, die gewünschten Icons auswählen und dann als SVG Sammeldatei herunterladen kann.

Icons zusammenstellen

1. Auf der Webseite kann man sich eine eigene Sammlung, hier „unsere-schule.org“ erstellen und dieser verschiedene Icons hinzufügen.
2. Über die Suche kann man nach Icons z.B.: „school“ suchen und dann gewünschte Icons seiner Sammlung hinzufügen.
3. Am Ende kann man die gesammelten Icons auswählen und herunterladen.

SVG Datei herunterladen und einbinden

Nun werden alle ausgewählten Icons mit einem editierbaren Namen angezeigt. Dieser Name muss bei der Nutzung angegeben werden, um das Icon anzuzeigen und kann hier noch angepasst werden.

Danach kann man auf den roten Link klicken um den SVG Code der Icons z.B.: in eine „symbol-defs.svg“ Datei zu kopieren, die dann auf die Webseite hochgeladen werden kann. Der darunter stehende CSS Code kann für die richtige Darstellung in das Stylesheet der Website kopiert werden.

Icons mit Shortcode hinzufügen

Hat man den CSS Code und die Icons Sammeldatei „symbol-defs.svg“, kann man die Icons mit folgendem Aufruf nutzen:

<!-- ID des Icons: icon-home -->
<svg class="icon icon-home">
    <use href="/icons/symbol-defs.svg#icon-home"></use>
</svg>

dann erscheint dieses Icon:

Da die Eingabe des HTML Codes nicht sonderlich nutzerfreundlich ist, habe ich für die Icons der Webseite einen Shortcode erstellt. Die folgende Eingabe ist gleichwertig mit der HTML Eingabe von oben:

[us_loadIcon icon="icon-home"]

Wie man einen Shortcode in WordPress erstellt kann man bei den Links nachlesen.

Links

• IcoMoon-App
• eigene Shortcodes erstellen