Icons — Auswählen und Einbinden

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

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 Nach­tei­le.

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 wer­den

Weitere Icons

Die Dashicons

Die Dashi­cons wer­den im Wor­d­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 Screen­shot).

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 wer­den.

<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 umge­stellt.

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

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 umge­stellt.

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 wer­den:

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 Wor­d­Press instal­liert wer­den, sind sie (immer) sofort ver­füg­bar
  • Die Dashi­cons wer­den aber vom Wor­d­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 unbe­denk­lich
  • Die Ver­wen­dung der Dashi­cons ist daten­schutz­recht­lich unbe­denk­lich, da die­se immer lokal instal­liert sind