Icon-Fonts: Die Bearbeitung von Website-Icons leicht gemacht!

12. Februar 2015 von Sebastian Maier

Die Bearbeitung von Websiten-Icons ganz leicht gemacht

Gerade bei Websites werden Icons als Grafiken gerne und häufig eingesetzt. Oft genutzte Beispiele sind der Briefumschlag als Symbol für den E-Mail-Kontakt oder das Home-Häuschen, das einen Besucher wieder auf die Startseite zurückbringt. Auch Social-Media-Icons dürfen mittlerweile auf keiner Website mehr fehlen.

Icons wie diese stellen Designer immer wieder vor Herausforderungen     


Doch diese Bild-Icons stellen Designer immer wieder vor Herausforderungen. Schon ein kleiner Änderungswunsch des Kunden beispielsweise eine andere Größe oder Farbe bedeutet, dass jede Datei neu angepasst werden muss. Dies kann einen erheblichen Zeitaufwand darstellen.


So veränderbar wie eine Schriftart

Doch zum Glück gibt es mittlerweile eine tolle und simple Möglichkeit, Icons schnell und einfach zu bearbeiten. Das Geheimnis ist der Einsatz von Icon-Webfonts, die – wie der Name schon sagt – wie eine Schriftart funktionieren.

Da es sich bei Icon-Webfonts nicht um Bilddateien handelt, kann wie bei einer normalen Schrift ganz einfach die Größe, Farbe, Opacity etc. über CSS verändert werden. So sind auch kleine Animationen möglich. Auch für mobile Endgeräte sind Icon-Fonts sehr nützlich, da sich ihre Größe automatisch unterschiedlichen Bildschirmformaten anpasst.

In der Vergangenheit waren Icons als Bilddatei zudem wegen der Einführung von Retina-Displays problematisch, da sie dort oft nicht mehr scharf angezeigt wurden. Das Problem der Schärfe konnte aber genauso beim Zoomen entstehen. Dann sahen Icons manchmal verpixelt aus. Mit Icon-Fonts besteht diese Gefahr nicht mehr, da sie sich als Schriftart dem Display anpassen.


Abwägen lohnt sich

Obwohl Icon-Fonts fast schon wie eine Wunderwaffe für die Icon-Erstellung erscheinen, gibt es auch ein paar Nachteile. Wichtig zu wissen ist, dass man die Gestaltung der Icons nicht anpassen kann. Ein Beispiel: Befindet sich am Häuschen ein Schornstein, kann man diesen nicht entfernen. Für diesen Fall gibt es allerdings auch Icon-Generatoren, mit denen man Icons nach dem eigenen Gusto erstellen kann und gleichzeitig nicht auf die Vorteile von Icon-Fonts verzichten muss.

Grundsätzlich verringern sich durch den Einsatz von Icon-Fonts die Ladezeiten einer Website. Doch dieser Effekt hebt sich auf, wenn man nur ein Icon nutzt, da auch immer die gesamte Webfont-Datei geladen werden muss. Hier lohnt es sich, abzuwägen. Dies gilt übrigens nicht, wenn man seine eigene Icon-Font mit einem Generator anlegt – siehe in der Linkliste unter dem Stichwort “Fontastic”.


Hier sind die aus meiner Sicht nützlichsten Seiten zum Thema Icon-Fonts


fortawesome.github.io/Font-Awesome

Font Awesome bietet eine große Auswahl an Icons und ist komplett kostenfrei.


fontastic.me

Auf fontastic.me findet man viele unterschiedliche Icons verschiedener Plattformen. Aus dieser Auswahl kann man sich eine individuelle Icon-Schriftart zusammenstellen und diese dann herunterladen. So verringern sich, wie oben erwähnt, die Ladezeiten einer Website, da nur die Icons geladen werden, die wirklich erscheinen sollen. Fontastic erlaubt es Nutzern zudem, eigene Icons zu erstellen und diese hochzuladen.


fontello.com

Auch hier erhält man eine große Auswahl an Icons und kann sich seine individuelle Icon-Font erstellen und herunterladen.


www.iconvau.lt

Iconvault ist ein Icon-Generator, mit dem man seine eigenen Icons erstellen kann.



Wie sieht es bei euch aus? Setzt ihr auf Bild-Icons oder verwendet ihr bereits Icon-Fonts? Habt ihr vielleicht sogar schon selbst eine individuelle Icon-Schriftart erstellt?


zurück
comments powered by Disqus