Ich versuche eingene Icons (FB_Calllist) einzubinden. Leider klappt das noch nicht.
http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ (http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ)
Wie kann ich eigene Icons verwenden?
Ich habe Icons aus Illustrator in SVG gespeichert. Bei Icon Moon App hochgeladen und als Class-Prefix "GK" vergeben.
Ich habe hier die Dateien auf 64x64 eingestellt. Ist das korrekt (da in der css 32x32 steht)?
Nach dem Download weiß ich nicht, in welcher Datei ich im ZIP-File folgendes tun soll:
Im heruntergeladenen Zip-file aus der IcoMoon App muss die Zeile
line-height: 1;
auskommentiert oder gelöscht werden, da die Anzeige in den Buttons ansonsten "verschoben" wirkt.
Die Dateien des ZIP-Files habe ich hierhin entpackt:
/opt/fhem/www/tablet/eigenefonts/gk
In meinen html-Dateien habe ich folgendes ergänzt:
<link rel="stylesheet" href="/fhem/tablet/eigenefonts/gk/style.css">
Die Datei sieht so aus:
.icon {
display: inline-block;
width: 1em;
height: 1em;
fill: currentColor;
}
/* =======================================================================================
Example showing how to change the color/size of the icons:
.gkname {
font-size: 32px; // works because "width" & "height" were set using em units
color: red; // works for single-colored icons, because "fill" was set to "currentColor"
}
======================================================================================== */
.gkhilkeundgunther {
width: 1.095703125em;
}
#gkhilkeundgunther .path1, #gkhilkeundgunther .path3, #gkhilkeundgunther .path4, #gkhilkeundgunther .path6 {
fill: #8b075e;
}
#gkhilkeundgunther .path2, #gkhilkeundgunther .path5 {
fill: #fff;
}
#gkgkphoto .path1, #gkgkphoto .path2 {
fill: #000;
}
#gkgkphoto .path3 {
fill: #fff;
}
ich habe nun so in meiner html eingebunden. Beides funktioniert nicht:
<div data-type="symbol" data-device="Fritzboxanrufeliste" data-get="1-internal" data-get-on='["Sipgate","69182323","Privat","Oculus Concept","Fotografie","Fax","23232323"]' data-icons='["","","gkhilkeundgunther","gkoculusconcept","gkgkphoto","",""]' data-on-colors='["","","",blue","red","",""]'></div>
<div data-type="symbol" data-device="Fritzboxanrufeliste" data-get="1-internal" data-get-on='["Sipgate","69182323","Privat","Oculus Concept","Fotografie","Fax","23232323"]' data-icons='["","","gk-hilkeundgunther","gk-oculusconcept","gk-gkphoto","",""]' data-on-colors='["","","",blue","red","",""]'></div>
Hallo Gunther,
mit anderen Icon funktioniert es aber schon mal? Das das nicht "reinpfuscht" ...
Am besten, du gibst mal deine Font Files, dann probiere ich es bei mir mal aus.
ein von drei Icons gehen testweise mal als Homebutton eingehängt.
Hänge das mal an.
Edit: nur "gk-oculusconcept" funktioniert
Edit 2: Mir ist aufgefallen, dass es für die beiden nicht funktionierenden Icons path-Anweisungen gibt. Für das funktionierende Icon "gk-oculusconcept" nicht:
@font-face {
font-family: 'GK';
src:url('fonts/GK.eot?nq99fx');
src:url('fonts/GK.eot?nq99fx#iefix') format('embedded-opentype'),
url('fonts/GK.ttf?nq99fx') format('truetype'),
url('fonts/GK.woff?nq99fx') format('woff'),
url('fonts/GK.svg?nq99fx#GK') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="gk-"], [class*=" gk-"] {
font-family: 'GK';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.gk-hilkeundgunther .path1:before {
content: "\e900";
color: rgb(139, 7, 94);
}
.gk-hilkeundgunther .path2:before {
content: "\e901";
margin-left: -1.095703125em;
color: rgb(255, 255, 255);
}
.gk-hilkeundgunther .path3:before {
content: "\e902";
margin-left: -1.095703125em;
color: rgb(139, 7, 94);
}
.gk-hilkeundgunther .path4:before {
content: "\e903";
margin-left: -1.095703125em;
color: rgb(139, 7, 94);
}
.gk-hilkeundgunther .path5:before {
content: "\e904";
margin-left: -1.095703125em;
color: rgb(255, 255, 255);
}
.gk-hilkeundgunther .path6:before {
content: "\e905";
margin-left: -1.095703125em;
color: rgb(139, 7, 94);
}
.gk-oculusconcept:before {
content: "\e906";
}
.gk-gkphoto .path1:before {
content: "\e907";
color: rgb(0, 0, 0);
}
.gk-gkphoto .path2:before {
content: "\e908";
margin-left: -1em;
color: rgb(0, 0, 0);
}
.gk-gkphoto .path3:before {
content: "\e909";
margin-left: -1em;
color: rgb(255, 255, 255);
}
Edit 3: Habe hier etwas gefunden, dass es an unterschiedlichen Farben liegen kann:
https://groups.google.com/forum/#!topic/icomoon/CG44M4_O5fo (https://groups.google.com/forum/#!topic/icomoon/CG44M4_O5fo)
Habe nun einfarbig gespeichert und es geht.
Man kann anscheinend auch bei IcoMoon App weitere Farben löschen.
Wichtig: den Code checken. Wenn da kein "pathx:before" vorkommen.
Servus in die Runde
versuche mich gerade daran Icons einzubinden, leider erfolglos.
Bin direkt nach dem WIKI vorgegangen, alles kopiert und eingebunden.
Nur der content wird angezeigt:
.ma-twitter:before {
content: "\e900";
} (siehe anhang)
Füge ich die Quick-Usage css in die index.html ein, funktioniert es.
Im Browser kommt folgende Meldung:
Failed to decode downloaded font: http://192.168.2.16:8083/fhem/tablet/css/fonts/wetter.ttf?qztm8f
index.html#menu.html:1 OTS parsing error: invalid version tag
index.html#menu.html:1 Failed to decode downloaded font: http://192.168.2.16:8083/fhem/tablet/css/fonts/wetter.woff?qztm8f
index.html#menu.html:1 OTS parsing error: invalid version tag
Danke für Support
Gruss
SirMarco
In der style.css oben wo die font-datei-namen stehen... das fragezeichen hinter der dateiendung und die dahinter angehängten buchstaben entfernen.
ein paar zeilen tiefer muss line-height entfernt sein
Hervorragende Leistung von Dir :)
Das mit den Buchstaben entfernen habe ich nicht gelesen
Danke für diesen Beitrag, nachdem ich auch jeweils die Fragezeichen und die nachfolgenden Buchstaben entfernt habe, funktioniert es einwandfrei! Sollte man das noch im Wiki ergänzen / verdeutlichen?
Grundsätzlich funktioniert das mit den eigenen Icons prima. Aber: Manche Icons will mir IconMoonApp einfach nicht erstellen. Das mit den mehreren Farben habe ich gelesen und bereits in Gimp die Dateien auf reines schwarzweiß eingestellt. bevor ich die Icons mit Inkscape in svg-Daten umwandle. Woran könnte es denn noch liegen? Ist das Zwischenformat png das Problem?