Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Widgets mit Icon Fonts

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    4.1k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.2k

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.6k

Widgets mit Icon Fonts

Geplant Angeheftet Gesperrt Verschoben Visualisierung
2 Beiträge 2 Kommentatoren 580 Aufrufe
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • Z Offline
    Z Offline
    zap
    Developer
    schrieb am zuletzt editiert von
    #1

    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.

    1 Antwort Letzte Antwort
    0
    • BluefoxB Offline
      BluefoxB Offline
      Bluefox
      schrieb am zuletzt editiert von
      #2

      vis wurde in der Zeiten angefangen, wann noch IE6 und iPad 1 aktuell waren.

      Jetzt konnte man sich so was vorstellen.

      1 Antwort Letzte Antwort
      0
      Antworten
      • In einem neuen Thema antworten
      Anmelden zum Antworten
      • Älteste zuerst
      • Neuste zuerst
      • Meiste Stimmen


      Support us

      ioBroker
      Community Adapters
      Donate

      588

      Online

      32.7k

      Benutzer

      82.4k

      Themen

      1.3m

      Beiträge
      Community
      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
      ioBroker Community 2014-2025
      logo
      • Anmelden

      • Du hast noch kein Konto? Registrieren

      • Anmelden oder registrieren, um zu suchen
      • Erster Beitrag
        Letzter Beitrag
      0
      • Home
      • Aktuell
      • Tags
      • Ungelesen 0
      • Kategorien
      • Unreplied
      • Beliebt
      • GitHub
      • Docu
      • Hilfe