Anordnung link: Symbol über dem Text

[robertPI]

Hallo,

folgender code ergibt ein Symbol mit Text daneben. Ich würde jedoch gerne den Text unter dem jeweiligen Icon darstellen. Im ausgewählten Fall soll Icon und Text farblich hinterlegt sein. Hat jemand eine Idee wie das funktionieren könnte?

Code Auswählen Erweitern

<div data-type="link" class="inline narrow"
                     data-width="120" data-height="40"
                     data-color="mint"
                     data-background-color=""
                     data-border-color="gray"
                     data-active-color="white"
                     data-active-background-color="mint"
                     data-active-border-color="mint"
                     data-active-pattern=".*content1.html"
                     data-icon="fa-home"
                     data-url="#page_content1.html"
                     data-load="#content1">Room 1
                </div>

[setstate]

schau mal in dieses Beispiel

https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/mobil/index_nav_footer.html

Code Auswählen Erweitern


<footer>
            <div class="tab-bar" >
                <div class="tab-link" >
                    <div data-type="link"
                         data-load="#content1"
                         data-url="#content_temps.html"
                         data-icon="fa-dashboard"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#content_temps.html">
                    </div>
                    <span class="tab-label">Temps</span>
                 </div>
                <div class="tab-link" >
                    <div data-type="link"
                         data-load="#content2"
                         data-url="#content_lights.html"
                         data-icon="fa-lightbulb-o"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#content_lights.html">
                    </div>
                    <span class="tab-label">Lights</span>
                 </div>
                <div class="tab-link" >
                    <div data-type="link"
                         data-load="#content3"
                         data-url="#content_windows.html"
                         data-icon="ftui-window"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#content_windows.html">
                    </div>
                    <span class="tab-label">Window</span>
                 </div>
                 <div class="tab-link" >
                    <div data-type="link"
                         data-load="#content4"
                         data-url="#content_sounds.html"
                         data-icon="fa-music"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#content_sounds.html">
                    </div>
                    <span class="tab-label">Sound</span>
                 </div>
                 <div class="tab-link" >
                    <div data-type="link"
                         data-load="#content5"
                         data-url="#content_range.html"
                         data-icon="ftui-thermo"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#content_range.html">
                    </div>
                    <span class="tab-label">Range</span>
                 </div>
                </div>
        </footer>


[robertPI]

Hallo setstate,

vielen Dank für die schnelle Antwort. Von diesem Beispiel komme ich, hier wird nur das ausgewählten Icon farbig und der Text bleibt. Ich möchte dagegen den Hintergrund von Icon und Text ändern, wie im 3.png