brauche Icon Hilfe

[patman1607]

Hi zusammen,

ich wollte meine FTUI wieder erweitern mit einer Netzwerkübersicht. Dafür wollte ich dieses Icon verwenden:
https://fontawesome.com/icons/network-wired?style=solid
nur wird es mir nicht angezeigt
kann man da was machen?
hier ist der code:

Code Auswählen Erweitern


<!-- ============== Netzwerk  ================ -->
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1" class="semitransparent">
<header>Netzwerk</header>
       <div class="">
            <div
            data-type="pagetab"
            data-url="netzwerk.html"
            data-icon="fa-network-wired"
            data-on-color="#6093e5"
            data-off-color="#6093e5"
            class="">
           </div>
           
<div class="anaus">Anzeigen</div>
           
</div>
</li>


ebenfalls bei dem icon wird mir nichts angezeigt:

Code Auswählen Erweitern

      <li><div data-type="push" data-icon="fa-satellite-dish"></div></li>

[TomLee]

Meine es so verstanden zu haben das diese Icons gehen:

Code Auswählen Erweitern

http://<fhemip>:8083/fhem/ftui/icons_table.html

Gruß

Thomas

[yersinia]

Entweder du findest in TomLees link auf deinem FHEM System ein entsprechendes Icon (anstelle fon fa würde zB auch oa mit oa-it_network gehen) oder du kannst dir das fehlende fa Icon selbst besorgen und die fontawesome dateien auf deinem FHEM System entsprechend ergänzen/überschreiben.

[TomLee]

Wie ergänzt/überschreibt man den ein icon korrekt ?

Die Frage hab ich mir gestern gestellt nachdem ich gesehen hatte das es auch fa-virus und fa-viruses gibt.

Gruß

Thomas

[yersinia]

Wie ergänzt/überschreibt man den ein icon korrekt ?

Gute Frage, da habe ich mir noch keine Gedanken gemacht.

Ich würde erstmal versuchen, die icon sets runterzuladen (zB fontawesome).
Dann müssen die ins FTUI eingebunden werden bevor man diese nutzen kann, ich habe dazu diesen wiki artikel gefunden: https://wiki.fhem.de/wiki/FHEM_Tablet_UI_FAQ#Wie_kann_ich_eigene_Icons_verwenden.3F

Und dann sollte das in meinem einfachen Verständnis funktionieren.

Oder man fragt setstate ob er die FTUI Source entsprechend aktualisiert.

[DocCyber]

Nach meiner Kenntnis sind nicht alle Icons, die man auf fontawesome findet, frei benutzbar.

[Dracolein]

Nach meiner Kenntnis sind nicht alle Icons, die man auf fontawesome findet, frei benutzbar.

Richtig, aber es gibt einen netten Reiter "Free", in dem alle freien Icons dargestellt sind. Leider sind nicht alle der dort angezeigten Icons auch in FHEM nutzbar.

[yersinia]

[2022-03-30] Diese Beschreibung bezieht sich auf FTUI2 - für FTUI3 siehe eigenen Thread.
Ich hab das jetzt bei mir probiert und nach einigen Schwierigkeiten hinbekommen. So bin ich vorgegangen auf dem Terminal vom FHEM Raspi (Angaben ohne Gewähr, Gedächtnisprotokoll ):
1. das icon set runterladen, entweder manuell von der Webseite (direkter Link) oder auf dem FHEM RasPi zB im tmp Verzeichnis via

Code Auswählen Erweitern

cd /tmp
wget https://use.fontawesome.com/releases/v6.7.2/fontawesome-free-6.7.2-web.zip
2. das Archiv entpacken

Code Auswählen Erweitern

unzip fontawesome-free-6.7.2-web.zip
3. den Ordner /opt/fhem/www/tablet/fonts und die Datei font-awesome.min.css sichern (just in case)

Code Auswählen Erweitern

sudo cp -ar /opt/fhem/www/tablet/fonts /opt/fhem/www/tablet/fonts_backup
sudo cp /opt/fhem/www/tablet/lib/font-awesome.min.css /opt/fhem/www/tablet/lib/font-awesome.min.css.backup
4. die neuen webfonts nach fonts verschieben und Besitzer anpassen

Code Auswählen Erweitern

sudo mv fontawesome-free-6.7.2-web/webfonts/fa-* /opt/fhem/www/tablet/fonts
sudo chown fhem:dialout /opt/fhem/www/tablet/fonts/fa-*
5. Datei all.min.css anpassen (Ändern des Quellordners von webfonts zu fonts)

Code Auswählen Erweitern

sed -i 's/webfonts/fonts/g' /tmp/fontawesome-free-6.7.2-web/css/all.min.css
6. Dateien all.min.css und v4-shims.min.css zusammenführen in eine neue Datei font-awesome.min.css:

Code Auswählen Erweitern

awk 1 /tmp/fontawesome-free-6.7.2-web/css/all.min.css /tmp/fontawesome-free-6.7.2-web/css/v4-shims.min.css > /tmp/fontawesome-free-6.7.2-web/css/font-awesome.min.css
7. font-awesome.min.css nach /opt/fhem/www/tablet/lib verschieben und Besitzer anpassen:

Code Auswählen Erweitern

sudo mv /tmp/fontawesome-free-6.7.2-web/css/font-awesome.min.css /opt/fhem/www/tablet/lib/font-awesome.min.css
sudo chown fhem:dialout /opt/fhem/www/tablet/lib/font-awesome.min.css
8. FTUI Seite einmal neu laden und schauen ob alles da ist und wie vorher funktioniert (wenn nicht, wir haben bei Punkt 3 Backups erstellt)

9. Verhindern, dass die neuen Dateien mit dem nächsten FTUI Update überschrieben werden - in dem man diese vom Update exkludiert im global-Device von FHEM:

Code Auswählen Erweitern

attr global exclude_from_update www/tablet/lib/font-awesome.min.css www/tablet/fonts/fa-*(Vorsicht: wird dieses RAW 1:1 in FHEM übernommen, überschreibt es bestehende Einträge; sollte man bereits exclude_from_update benutzen muss man dies nur um www/tablet/lib/font-awesome.min.css www/tablet/fonts/fa-* ergänzen)

10. Optional: den fontawesome Ordner und das runtergeladene Archiv aus /tmp löschen:

Code Auswählen Erweitern

rm -r /tmp/fontawesome-free-6.7.2-web
rm /tmp/fontawesome-free-6.7.2-web.zip
EDIT I
Übrigens, die kostenlos enthaltenen Icons (Pakete solid und brands) kann man auf der Webseite sehen (für die Benutzung im FTUI muss den Iconnamen ein fa- vorangestellt werden: aus dizzy muss fa-dizzy werden usw.); dies sind dann mehr als derzeit für fontawesome unter http://<fhemip>:8083/fhem/ftui/icons_table.html zu finden

EDIT II
Falls was schief geht, so spielt man das Backup aus Punkt 3 wieder ein:

Code Auswählen Erweitern

sudo rm -r /opt/fhem/www/tablet/fonts
sudo mv /opt/fhem/www/tablet/fonts_backup /opt/fhem/www/tablet/fonts
sudo mv /opt/fhem/www/tablet/lib/font-awesome.min.css.backup /opt/fhem/www/tablet/lib/font-awesome.min.css
EDIT III (2020-07-01)
Text aktualisiert auf neue fa5 Version v5.13.1; Backups aus Punkt 3 löschen via (ohne Gewähr und auf eigene Gefahr):

Code Auswählen Erweitern

sudo rm -r /opt/fhem/www/tablet/fonts_backup
sudo rm /opt/fhem/www/tablet/lib/font-awesome.min.css.backup
EDIT IV (2020-07-20): Text aktualisiert auf neue fa5 Version v5.14.0
EDIT V (2020-10-11): Text aktualisiert auf neue fa5 Version v5.15.1
EDIT VI (2021-01-21): Text aktualisiert auf neue fa5 Version v5.15.2
EDIT VII (2021-04-04): Text aktualisiert auf neue fa5 Version v5.15.3
EDIT VIII (2021-11-06): Text aktualisiert auf neue fa5 Version v5.15.4
EDIT IX (2022-02-23): Text aktualisiert auf neue fa6 Version v6.0.0
EDIT X (2022-03-30): Text aktualisiert auf neue fa6 Version v6.1.1
EDIT XI (2022-08-09): Text aktualisiert auf neue fa6 Version v6.1.2
EDIT XII (2022-10-04): Text aktualisiert auf neue fa6 Version v6.2.0
EDIT XIII (2022-12-08): Text aktualisiert auf neue fa6 Version v6.2.1
EDIT XIV (2023-02-10): Text aktualisiert auf neue fa6 Version v6.3.0
EDIT XV (2023-06-07): Text aktualisiert auf neue fa6 Version v6.4.0
EDIT XVI (2023-09-17): Text aktualisiert auf neue fa6 Version v6.4.2
EDIT XVII (2024-03-05): Text aktualisiert auf neue fa6 Version v6.5.1
EDIT XVIII (2024-08-15): Text aktualisiert auf neue fa6 Version v6.6.0
EDIT XIX (2024-12-08): Text aktualisiert auf neue fa6 Version v6.7.1
EDIT XX (2024-12-17): Text aktualisiert auf neue fa6 Version v6.7.2

[yersinia]

Für alle, die eine Übersicht der Icons haben wollen, hab ich mir ein kleines HTML mit JavaScript gebaut - es liest folgende fünf CSS Files aus, die im <head> Bereich via des <link /> Attribut eingebunden werden:

Code Auswählen Erweitern

lib/font-awesome.min.css
lib/fhemSVG.min.css
lib/openautomation.min.css
lib/weather-icons.min.css
lib/material-icons.min.css
Die anhängende HTML muss in den gleichen Ordner wie die icons_tables.html (/opt/fhem/www/tablet) gespeichert werden und kann dann via http://[fhem-ip]:8085/fhem/ftui/icons_table_dyn.html aufgerufen werden. Das Laden kann etwas dauern; die CSS Files werden dynamisch ausgelesen.

[neyzen]

Hallo,

ich habe genau nach dieser Anweisung die Font Awesome Icons hinzugefügt.
Allerdings bekomme ich für folgendes Icon nichts angezeigt.

https://fontawesome.com/icons/microsoft?style=brands

[yersinia]

The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.

https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

Steht übrigens -etwas unscheinbar- auch auf der von dir verlinkten Seite:

Code Auswählen Erweitern

<i class="fab fa-microsoft"></i>

https://fontawesome.com/icons/microsoft?style=brands

FTUI widgets stellen per default ein fa vorran, das funktioniert in v5 noch mit den solids, aber nicht mehr für brands. Den brands muss man ein fab vorranstellen. Anstelle von fa-microsoft musst du fab fa-microsoft nutzen.

EDIT: die widgets können derzeit die fa icons mit den fab prefixes nicht laden.

[neyzen]

Ja, das funktioniert leider auch nicht

folgende def.

Code Auswählen Erweitern

<link rel="stylesheet" href="lib/font-awesome.min.css" />

Code Auswählen Erweitern

<header>Fenster</header>
<div class="inline top-space">
<div class="big"
data-type="symbol"
data-device="Fensterkontakt_WC"
data-states='["open","closed"]'
data-icons='["fab fa-microsoft faa-flash animated faa-slow","fab fa-microsoft"]'
data-colors='["black","white"]'>
</div>
<div data-type="label" class="cell small">WC</div>

[yersinia]

Ok, das stimmt. Ich hab das mal bei mir nachgestellt.

Während

Code Auswählen Erweitern

<i class="fab fa-microsoft"></i>
funktioniert, funktioniert die Verwendung von fab offensichtlich nicht mit den derzeitigen FTUI widgets.

[neyzen]

Ja so wird das bei mir auch dargestellt.
Da wird aber die Zustandsänderung dann nicht gewechselt.
Vielleicht krieg man das doch irgendwie zum laufen.
Vielen Dank

[yersinia]

Vielleicht krieg man das doch irgendwie zum laufen.

Ja, bedeutet aber einen tieferen Eingriff in FTUI Dateien - und den Umbau von den eigenen FTUI Seiten.