Eigenes Icon in Tablet Ui zu verwenden

Jupedi · 20 April 2019, 22:32:16

Hallo,

habe versucht ein eigenes Icon ins Tablet Ui zu integrieren.
(Nach den Anweisungen im Wiki)

Klappt leider nicht.

Habe das Icon mit Inkscape erstellt ( als .svg, mit fill = 60%grau, stroke = ohne Farbe)
(ist angehängt)

Danach mit IcoMoon den Font erstellt und downgeloadet.
Name= ECMICON_fill, ClassPrefix= my_

dann Style.css editiert:
- die 5 Fragezeichen und die Ziffern dahinter entfernt.

von so:

Code Auswählen



@font-face {
  font-family: 'ECMICON_fill';
  src:  url('fonts/ECMICON_fill.eot?gxxlbc');
  src:  url('fonts/ECMICON_fill.eot?gxxlbc#iefix') format('embedded-opentype'),
    url('fonts/ECMICON_fill.ttf?gxxlbc') format('truetype'),
    url('fonts/ECMICON_fill.woff?gxxlbc') format('woff'),
    url('fonts/ECMICON_fill.svg?gxxlbc#ECMICON_fill') format('svg');
  font-weight: normal;
  font-style: normal;
}

auf so:

Code Auswählen

@font-face {
  font-family: 'ECMICON_fill';
  src:  url('fonts/ECMICON_fill.eot');
  src:  url('fonts/ECMICON_fill.eot') format('embedded-opentype'),
    url('fonts/ECMICON_fill.ttf') format('truetype'),
    url('fonts/ECMICON_fill.woff') format('woff'),
    url('fonts/ECMICON_fill.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon{ auszutauschen ist nicht nötig, da nicht vorhanden,
sondern bereits das hier: [class^="my_"], [class*=" my_"] {

die Zeile auskommentiert: /* line-height: 1; */

Danach den Inhalt des ZipFiles nach
/opt/fhem/www/tablet/myfonts kopiert.

In den <head> der Page dann noch <link rel="stylesheet" href="myfonts/style.css"> eingefügt.

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * main page
     *
     load this page via widget pagebutton
	-->
<link rel="stylesheet" href="myfonts/style.css">
</head>
<body>

Dann den Namen des funktionierenden Icons durch den meines eigenen ersetzt und die html Datei hochgeladen.

Code Auswählen

                    <div data-type="switch"
                    data-device="FBDECT_Funksteckdose_ECM"
                    data-set-on="on" 
                    data-set-off="off"
                    data-states='["off","on"]'
                    data-icons='["my_ECMICON_fill","my_ECMICON_fill"]'
                    data-background-icon=""
                    data-background-colors=""
                    data-colors='["red","green"]'
                    class="normal top-space">
                    </div>

Die Stelle, an der das Icon sein sollte, ist aktiv, das Icon jedoch nicht zu sehen.

Muss der fill eine bestimmte Farbe haben?

Ich sag schon mal danke!

FHEM Forum

Eigenes Icon in Tablet Ui zu verwenden

Jupedi