Icons — Auswählen und Einbinden

Icons wer­den zur opti­schen Anrei­che­rung auf vie­len Web­sites eingesetzt. 

Bilder oder Fonts?

Gene­rell wer­den Icons als Ein­zel­bil­der oder als Schrif­ten / Fonts hin­zu­ge­bun­den. Bei­de Vari­an­ten haben ihre Vor- und Nachteile.

Icon-Sammlungen

Kostenfreie Icon-Sammlungen

• Das IconMnstr (https://iconmonstr.com) lie­fert eini­ge kos­ten­freie Icons (in vier ver­schie­de­nen For­ma­ten); lei­der müs­sen die Icons ein­zel­nen her­un­ter­ge­la­den, ange­passt und dann wie­der hoch­ge­la­den werden

Weitere Icons

Die Dashicons

Die Dashi­cons wer­den im Word­Press-Backend ver­wen­det. Eine Über­sicht fin­det sich hier: https://developer.wordpress.org/resource/dashicons/#admin-site

Wenn man die­se Icons auf der eige­nen Web­site ein­set­zen möch­te, so ist die­se sehr ein­fach mög­lich. Über die Über­sicht kön­nen ein­zel­ne Snip­pets gene­riert wer­den (sie­he Screenshot).

Sol­len die Dashi­cons ein­zeln ver­wen­det wer­den, so klickt man ein­fach auf eine der drei Copy-Links. 

In unse­rem Bei­spiel wur­de HTML ange­klickt, um den Code für das Mega­pho­ne zu erhal­ten. Die­ser Code kann dann ein­fach in den Edi­tor ein­ge­fügt werden.

<span class="dashicons dashicons-megaphone"></span>

Die Far­be lässt sich dann ein­fach abän­dern. Hier ist das Mega­phon im Text inte­griert und die Far­be über den Guten­berg-Edi­tor auf rot umgestellt.

Rotes Mega­pho­ne: Und das Gan­ze ist im Text integriert.

Zudem las­sen sich die Icons in der Grö­ße ändern. Hier ist nun die Grö­ße auf “2em” umge­setzt und die Far­be auf lila umgestellt.

Lila Mega­pho­ne:

Ein sehr belieb­tes Dashi­con ist das Zei­chen für “Exter­nal Links”:

Auch hier kön­nen Farb- und Grö­ßen­an­pas­sun­gen vor­ge­nom­men werden: 

Alle Dashi­cons haben einen sym­bo­li­schen (hier: dashi­cons-exter­nal) wie auch einen tech­ni­schen Namen (hier: con­tent: “\f504”;)

Anmer­kun­gen:

• Da die Dashi­cons bereits mit Word­Press instal­liert wer­den, sind sie (immer) sofort verfügbar
• Die Dashi­cons wer­den aber vom Word­Press-Core-Team nicht wei­ter­ent­wi­ckelt, son­dern lang­fris­tig durch SVG-Datei­en ersetzt. Dies wird lang­fris­tig dazu füh­ren, dass man gege­be­nen­falls umstel­len muss
• Die Ver­wen­dung der Dashi­cons ist lizenz­recht­lich unbedenklich
• Die Ver­wen­dung der Dashi­cons ist daten­schutz­recht­lich unbe­denk­lich, da die­se immer lokal instal­liert sind