header als Button mit Icon

[TomLee]

Hallo,

meine einfache Einkaufslisten-Definition sieht normal so aus (1.Bild):

Code Auswählen Erweitern

<header>Einkaufsliste</header>
<div class="vbox items-center">
<div data-type="checklist"
data-list="list_SHOPPING_ITEM"
data-device="Echo"
data-set="item_shopping_delete">
</div>
</div>

Den header hab ich ersetzt durch ein div mit einem Link-Widget als Inhalt, dem Hintergrund die gleiche Farbe verpasst wie der header normal hat das es sich dem Gesamtbild wieder einfügt, das der Link-Text jetzt orangefarben ist passt, damit ist erkenntlich (für mich) das damit eine Aktion (Einkaufsliste senden) möglich ist (2. Bild):

Code Auswählen Erweitern

<div data-type="link"
data-background-color="#262626"
data-fhem-cmd="pushek">Einkaufsliste
</div>
<div class="vbox items-center">
<div data-type="checklist"
data-list="list_SHOPPING_ITEM"
data-device="Echo"
data-set="item_shopping_delete">
</div>
</div>

Jetzt würd ich gerne noch das fa-paper-plane Icon rechts vom Text Einkaufsliste stehen haben wollen.
Mit der Definition sieht das dann wie auf dem 3. Bild aus:

Code Auswählen Erweitern

<div data-type="link"
data-background-color="#262626"
data-icon-right="fa-paper-plane"
data-height="22"
data-fhem-cmd="pushek">Einkaufsliste
</div>
<div class="vbox items-center">
<div data-type="checklist"
data-list="list_SHOPPING_ITEM"
data-device="Echo"
data-set="item_shopping_delete">
</div>
</div>

Und das man sieht das data-height sich nicht auf das Icon auswirkt noch eine dritte Definition (4. Bild):

Code Auswählen Erweitern

<div data-type="link"
data-background-color="#262626"
data-icon-right="fa-paper-plane"
data-height="70"
data-fhem-cmd="pushek">Einkaufsliste
</div>
<div class="vbox items-center">
<div data-type="checklist"
data-list="list_SHOPPING_ITEM"
data-device="Echo"
data-set="item_shopping_delete">
</div>
</div>

Hat vlt. jemand trotzdem eine Idee ob die Möglichkeit besteht das Icon gleich nach Einkaufsliste zu positionieren und etwas kleiner zu machen ?

Gruß

Thomas