PNG Icon einfärben via css Filter (Anleitung)

[olej]

Hallo zusammen,

ich habe auf die schnelle kein Thema dazu gefunden, deshalb nun ein neues
Auf der Suche nach einer Möglichkeit, die Icons aus dem UF-ICONSET einzufärben, bin ich auf eine nette Lösung gestoßen.
Generell scheint es aktuell nur möglich mit css filtern die Farbe zu ändern.
Um nun eine gewünschte Farbe zu erzeugen ist diese Website hier sehr hilfreich:
https://codepen.io/sosuke/pen/Pjoqqp
Hier gibt man die Zielfarbe als HEX ein und erhält den nötigen CSS Filter als Antwort
Beispiel:
Farbe: #0ecf5b
Erzeugt:

filter: invert(73%) sepia(47%) saturate(5237%) hue-rotate(97deg) brightness(99%) contrast(89%);

Dies als Design Vorlage erzeugt nun ein grünes Icon

image.png
Vorher / Nachher
image.png

So vielleicht hilft dies ja jemanden?! Falls dies doppelt im Forum ist, bitte löschen

[DustinR]

Hey,

coole Sache. War mir bisher gar nicht klar, dass sowas über CSS-Filter möglich ist. Werde ich in Zukunft sicher ab und an mal nutzen. :-)

Hab noch diese Seite hier gefunden: https://codepen.io/jumarjuaton/full/mdJYWYq - Dort kann man den Filter etwas besser berechnen, wenn man aus Ausgangsbild ein weißes Bild hat. Der oben genannte Link funktioniert nur, wenn das Bild schwarz ist.

Viele Grüße
Dustin