Icon

Icons verwenden in WP

Manchmal ist es sehr praktisch, wenn man Icons verwenden könnte anstatt vieler Worte. Icons werden visuell sehr schnell erfasst und normalerweise weiss der Leser sofort, um was es geht. Wir werden von Piktogrammen durch den Alltag geleitet: Wäschelabels, Strassenschilder, Wettervorhersage usw. Es gibt auch allerlei lustige Piktogramme und ebenso viele sinnlose. Wenn Du auf Deinen WordPress Seiten ebenfalls Icons einsetzen möchtest, erkläre ich Dir, welche Möglichkeiten Du hast.

Wovon sprechen wir hier eigentlich?

Wir kennen bereits die Schriften, die nur aus Icons bestehen, aus der Zeichentabelle. Öffnen: Start > Windowszubehör > Zeichentabelle. Von diesen Icons oder Symbolen sprechen wir.

Icons verwenden - Wingdings
Zeichentabelle Wingdings
Icons verwenden - Webdings
Zeichentabelle Webdings

 

 

Zwei Möglichkeiten: Font-Icons oder SVG

Du musst Dich zwischen zwei Techniken entscheiden. Es gibt

  1. Icons, die als Font (Schriftart) eingefügt werden
    und
  2. SVG (Scalable Vector Graphics) Icons

Wir beginnen gleich mal mit den Font-Icons

Vorteile von Icon-Fonts

  • Alle Browser, auch die älteren, zeigen Icon-Fonts korrekt an.
  • Das Font-Icon kann in normalem Text eingefügt werden. Es kann einfach positioniert werden.
  • Das Font-Icon kann mit CSS formatiert werden, man kann ihm zum Beispiel eine hover:farbe zuweisen.
  • Bei diesen Icons handelt es sich um Vektorgrafiken, die skaliert werden können.
  • Es gibt Plugins für WordPress.

Nachteile von Font Icons

  • Der Icon-Font muss bei jedem Website Aufruf geladen werden. Das verlängert die Ladezeit.
  • Die eingefügten Shortcodes werden zum Problem, wenn man das Plugin oder den Font entfernt. Dann bleiben sie als Leichen zurück und werden als Text angezeigt. Sie müssen dann von Hand gelöscht und ersetzt werden.
  • Vorlesesoftware hat Probleme mit Iconfonts. Auch Google hadert. Screenreader und Google erkennen die Icon-Fonts nur als normalen Text, nicht als Symbol.
  • Die Icons sind nur einfarbig.

Font Icons verwenden – ganz einfach mit einem Plugin

Es gibt für WordPress mehrere Plugins (suche nach Icon Fonts). Ich habe mich für Better Font Awesome entschieden und bin sehr zufrieden damit. Better Font Awesome erweitert den TinyMCE Editor mit einem Dropdown Menü. Darin enthalten ist sogar eine Suchfunktion. Wer den überaus praktischen TinyMCE Editor nicht benutzt, kann die Icons auch per Shortcode oder HTML einfügen.

Icons verwenden in WP mit einem Plugin
Dropdown Menü von Better Fonts Awesome

Und so sehen diese Icons beispielsweise aus:          


Icons als SVG einfügen

Was SVG genau ist, wird auf dieser Website sehr gut beschrieben.

 Vorteile von SVG Icons

  • SVG ist eine zukunftsorientierte Technik.
  • Auch hochauflösende Bildschirme zeigen SVG Grafiken perfekt an. Alle Bildschirme kommten mit SVG klar.
  • SVG Icons können animiert werden.
  • Sie können in CSS inline eingebunden werden.
  • Mit SVG können auch kompliziertere Grafiken eingebunden werden.

Nachteile von SVG Icons

  • Nur die neueren Browser kommen unterschiedlich gut mit SVG Icons klar. IE 8 und darunter und Android 2.3 und darunter sind überfordert.
  • Obwohl ich recherchierte, bin ich auf keine weiteren Nachteile gestossen, die hier relevant wären. Für Entwickler gibt es jedoch noch einiges zu beachten.

Noch verwende ich nur das Plugin Better Font Awesome. Ich setze die Symbole nur sehr sparsam ein. Deshalb habe ich das momentan einzige erhältliche WordPress Plugin für SVG Icons WP SVG Icons nicht ausprobiert. Es gibt eine gratis Version mit eingeschränkten Möglichkeiten. Man kann damit aber alle 490 Icons verwenden. Dann gibt es mehrere kostenpflichtige Vollversionen. Die günstigste ist für 29 € pro Jahr und Website zu haben. Was man für diesen Betrag bekommt, siehst Du in diesem Video:

(Visited 212 times, 2 visits today)