Farben von Hintergrundbildern ändern

[wintermute]

Es geht mir mehr darum, dass das Icon voellig verpixelt ist und sogar Teile fehlen
Im uebrigen, um auf gaert einzugehen: es ging mir in erster Linie um den Geschwindigkeitsaspekt beim Laden der Visu - weswegen ich von SVGs auf PNGs umgestiegen waere. Wenn nu aber regelmaessig der gesamte Font und damit alle SVGs auf dem Iconset (obwohl ich selber nicht mal 10% davon brauche) im Vorfeld geladen wird, dann wird das doch vermutlich eher langsamer als schneller, oder?
Vom Bequemlichkeitsaspekt beim Einfaerben jetzt mal abgesehen

[gaert]

Nur am Rande: Der Font wird nicht(!) vorgeladen (preloading) - denn dies wird erst seit Neuesten von diversen Browsern unterstützt. Wenn die Fontdatei also sehr groß ist, wird u.U. zunächst der Defaultfont verwendet (vom Browser), bis die Datei geladen ist.

[timberland]

Ja das sieht so aus im Browser

IcoMoon_Demo.png

wenn du das &#xe97f eingibst kommt nur das icon in der visu

&#x + den coden von links unten

[wintermute]

Danke fuer die Umwandlungsarbeit!!
Ich hab mir das grad mal runtergeladen und die demo.html im Browser geoeffnet, da sieht man dann sowas hier:
iconfont.png
Ist das nun ein Fehler der demo.html oder meines Browsers oder woran mag das liegen? Denn wenn das Endergebnis in der Visu auch so aussieht, dann stell ich gleich lieber alles von SVG auf PNG und nicht auf "Font" um...

gruesse :: Michael

[timberland]

Jaaaa, ABER mit ist aufgefallen es sind sehr viele drinnen die er nicht übernommen hat und werden dann auch nicht angezeigt. Vor allem die von Fenster usw...

Ich wandle gerade diese SVG's um. Ist echt mega viel Arbeit, dass sind ja so viele Icons

Ich mach das nur für Euch

[stonie2oo4]

Vielen Dank,
das is ja Sau cool

[MrMirror]

Spitze, direkt mal installiert, funktioniert super!

[timberland]

Wem es interessiert, hier kann man sich ganz einfach Fonts aus den SVG's erstellen

https://icomoon.io/app/#/select

Ich hab mal alle KNXUF SVG's in den Font genommen. Falls es wer teste möchte
hier zum laden

http://d.pr/f/3zN1

Die Codes dazu findet ihr in der demo.html

wie gewohnt so zum eingeben &#xeb87

[tger977]

an der Fontintegration habe ich mich mal versucht. Geht, ist aber irgendwie extrem aufwändig und ich habe einige icons im Einsatz...

Ich habe nun nochmal etwas recherchiert bzgl. CSS / webkit Optionen. Es gibt wohl schon Möglichkeiten mit webkit-filter oder auch per CSS über mix-blend-mode. Allerdings schaffe ich es nicht diese Optionen nur für das png oder svg icon anzuwenden. Bisher habe ich probiert diese Optionen in den "eigene CSS-Eigenschaften" im Design des Universalelementes einzutragen und nur als Hintergrundbild ein svg/png Bild auszuwählen. Allerdings passiert dann gar nichts oder es wird alles einheitlich eingefärbt...

Wie kann ich die eigenen CSS Eigenschaften auf nur das svg/img anwenden entsprechend folgendem code:

.icon {
     background: url(img/icon.png); /* Your icon */    
     position: relative; /* Allows an absolute positioned psuedo element */
}  
.icon::after{    
    position: absolute; /* Positions psuedo element relative to .icon */    
    width: 100%; /* Same dimensions as .icon */    
    height: 100%;    
    content: ""; /* Allows psuedo element to show */    
    background: #EC008C; /* The color you want the icon to change to */    
    mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */ }

[saegefisch]

perfekt, genau das habe ich gemeint. Sehr cool, timberland! Der übliche Fall dürften vermutlich anders farbig durchgestrichene Icons sein; ansonsten kann man sich sicher meist auch monofarbig arrangieren. Obwohl die zweifarbige Steckdose...

[timberland]

Da müsste man das Icon trennen und überlagern.
Aber im Endeffekt geht es ja eigentlich nicht um so viele Icons in der Visu.

EDOMI_·_Administration.png
EDOMI_·_Administration.png
KNXUF-Icon.png
KNXUF-Icon_-_KNXUF-Icon.png

[saegefisch]

Insgesamt sind die Fonts eine schöne Lösung - auch weil man - sofern die Fonts zueinander passen - man mit dem Ersetzen des Fonts alle Icons in der Visu mit einem Schlag ändern kann. Damit hat man stets eine homogene Icon-Welt und kann ohne "Bauchschmerzen" auch mal rasch ein Icon ändern. Okay, die Erstellung des Fonts macht auch Arbeit. Toller Ansatz, danke!

Nachteil ist die unausweichliche Einfarbigkeit (jedes Zeichens) bei Fonts. Es gäbe dazu alternative Lösungen ("sprite"), aber ich habe gestern ein paar Stunden damit experimentiert und es wäre mein Favorit - aber in Chrome lief es (noch) nicht sauber. Vielleicht die Zeit noch nicht reif dafür, aber es wäre die beste Lösung aus meiner Sicht: Mehrfarbigkeit im Icon, Klarnamen ("hazy", "dusty", Cloudy_night", "sperre_gesetzt",,,) statt Zeichencodes, Einfärben und mehr (z.B. Linenstärken) per CSS. Ich werde das im Blick behalten und es später mal wieder testen. Wenn es gehen sollte, würde es etwas Unterstützung von Christian brauchen, aber das wäre sehr flexibel und die Erstellung wäre mit jedem Texteditor möglich - es gibt aber auch Tools, die ein ganzes Verzeichnis zu einem SVG (mit <defs>) zusammen fassen. Und so könnte man wirklich leichten Fußes auch viele Icons mit einem Upload austauschen.

Die Einfarbigkeit bei den Fonts könnte man vermutlich durch Überlagerung zweier Elemente mit unterschiedlich gefärbten Icons lösen, z.B. Ein Schloss in weiß und ein Zeichen, dass aus einem Querstrich besteht legt man in Rot drüber oder ist unsichtbar (z.B. je nach KO).

Anmerkung: Wenn man sich "sein" Font zusammen stellt ist das unerheblich, aber wenn man nicht alles nutzen will, wäre es vermutlich sparsamer (auch in der Laufzeit) Fonts nach Themen zu haben: Wetter, Haus,... die "unnötigen" Icons können sich auch ganz schön läppern (ich z.B. habe keinerlei Wetter bei mir in der Visu)

[timberland]

Hi,

wer mag kann sich das mal ansehen und testen. Ich habe 2 KNXUF Icons in den Font gegeben.

&#xE001 = Licht
&#xE004 = Steckdose

Anleitung wäre doch etwas zu lang. Für den Mac gibt es Glyphs und Windows wird es auch etwas geben. Vielleicht findet sich ja jemand der diese Icons verwendet und ergänzt den Font.

Download ist hier:

http://d.pr/f/XZ0z




EDOMI_·_Administration.png


KNXUF-Icon_-_KNXUF-Icon.png

[tger977]

also die Idee mit der Font Integration klingt sehr gut. An einer Anleitung hätte ich auch Interesse.

Aber: Ich frage mich wirklich noch warum und wie das in der Cometvisu mit diesen KNX-UF Icons hier aus dem Forum mit der Einfärbung problemlos geht und bei Edomi offensichtlich nicht?!

[mars]

na, vielleicht etwas falsch ausgedrückt: Mein Vorschlag betrifft die Icons hier aus dem Forum, die sind ja ohnehin als Download verfügbar.
Wenn diese nun (zusätzlich) in Form einer Fontdatei verfügbar währen, verletzt das doch keine Rechte - oder?