Multicolor Icon Fonts

Bildschirmfoto 2018-04-05 um 00.08.51.png

Icons als Fontset anzulegen ist mittlerweile eine etablierte Methode, um Vektor basierte Icons in Wbseiten zu integrieren. Dabei wird ein Font erstellt, der statt Buchstaben Vektor Symbole eingebunden hat. So kann z.B. Der Buchstabe „r“ ein Pfeil nach rechts sein und „l“ ein Pfeil nach links.
Für diese Vorgehensweise gibt es viele Vorteile:

  • Einbindung von Vektordateien, die bei jeder Skalierung scharf bleiben
  • kein Ausspielen von Retina Größen notwendig
  • kleine Datenmenge
  • durch das Packen der vielen Icons in eine Datei muss die Website nur eine Datei anfingen, statt viele einzelne. Das macht den Seitenload schneller



Allerdings entsteht ein großer Nachteil. Da das Icon so behandelt wird, wie ein Buchstabe, kann es auch nur eine einzige Farbe haben. Bunte Pfeile sind so nicht möglich.



 

Die Lösung ist ein Iconfont Set als Baukasten. Jede Ebene eines Icons gilt als eigenes Symbol (eigener Buchstabe). Im CSS kann man jedem Icon eine eigene zuweisen und durch ein negatives Letterspacing die Icons als Layer übereinander lagern.

Relevant ist hier eine präzise Vorbereitung. Das Iconset muss als modulares Prinzip vorbereitet werden. Die Positionierung und Skalierung der einzelnen Icons muss passen. Am Besten nutzt man hierfür ein flexibles Raster im quadratischem Raster nach 2hochX Prinzip.

 
Andrea Cavallaro