NEWS
Widgets mit Icon Fonts
-
Hallo,
mein erster Beitrag im Forum. Ich hoffe, ich falle nicht gleich negativ auf mit meiner Frage.
Ich bin gerade dabei, meine Smarthome Umgebung von FHEM nach ioBroker zu migrieren. Die Geräte habe ich soweit alle in ioBroker abbilden können.
Beim Erstellen der VIS Views habe ich nun das Problem, dass bei den Widget die Farbe der Icons nicht geändert werden kann. Einige Nutzer machen das anscheinend per Photoshop oder anderem Tool, ist mir aber ehrlich gesagt zu aufwändig und v.a. zu statisch. Grund für diese Problematik ist wohl, dass für die Widgets Bilder verwendet werden und keine Symbole aus Icon-Fonts. Warum ist das so? Gibt es irgendwelche technischen Gründe in ioBroker, die die Verwendung von Symbolen aus Icon-Fonts verhindern? Bzw. muss ich irgendwelche Nachteile in Kauf nehmen, wenn ich Icon-Fonts in Widgets verwende?
Ich habe das jetzt mal testweise für ein Button-Widget umgesetzt. D.h. ich habe
-
Den Google Material Icon Font per VIS Dateimanager hochgeladen
-
In der global Section des Views die notwendige CSS Klasse definiert und den Font eingebunden
Dann im Widget kein Bild ausgewählt, sondern als Button-Text folgenden HTML Code eingegeben:
face
Funktioniert einwandfrei, wenn auch die Definition etwas sperrig ist. Dabei ist "face" der Name des darzustellenden Symbols aus dem Icon-Font. Vorteil: Man kann die Attribute des Symbols wie z.B. die Farbe nun problemlos im VIS Editor ändern.
Mir ist klar, dass die Umstellung der Widgets auf Icon-Fonts viel Aufwand ist. Wenn technisch nichts dagegen spricht, könnte ich mir vorstellen, einige der Widgets zusätzlich mit Symbolen bereitzustellen.
Interessante Fonts gibt es jedenfalls genug. Neben dem Material Font z.B. Font-Awesome und Flaticon.
-
-
vis wurde in der Zeiten angefangen, wann noch IE6 und iPad 1 aktuell waren.
Jetzt konnte man sich so was vorstellen.