[Gelöst]:Positionierung eines Icon im Pagetab-Widget

Begonnen von yamizo, 03 November 2017, 19:32:04

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

yamizo

03 November 2017, 19:32:04 Letzte Bearbeitung: 05 November 2017, 10:09:05 von yazo
Hallo zusammen,

vermutlich stehe ich nur auf dem Schlauch, aber ...

Ich will ein Icon aus der weather-icon-Reihe als Symbol für einen Lagetab-Button verwenden. Das Icon wird aber nicht zentriert im Buttonkreis dargestellt, sondern nach oben verschoben. Das bekomme ich einfach nicht in die Mitte gerückt:

Die HTML sieht folgendermaßen aus:
Code Auswählen
<html>
<body>
     <div class="sheet">
        <div class="row">
            <div class="cell top-align">
                <div data-type="clock" data-format="l" class="large bold"></div>
                <div data-type="clock" data-format="j. F Y" class="large bold"></div>
                <div data-type="clock" data-format="H:i" class="tall bold"></div>
               
                <div data-type="pagetab" data-url="/fhem/tablet/index.html"  data-icon="fa-home" class="cell big top-space-3x"></div>
                <div data-type="label" class="darker top-narrow">Übersicht</div>
                <div data-type="pagetab" data-url="/fhem/tablet/index.html"  data-icon="fa-fire" class="cell big top-space-3x"></div>
                <div data-type="label" class="darker top-narrow">Heizung</div>
                <div data-type="pagetab" data-url="/fhem/tablet/index.html"  data-icon="wi wi-strong-wind" class="cell big top-space-3x"></div>
                <div data-type="label" class="darker top-narrow">Lüftung</div>
                <div data-type="pagetab" data-url="/fhem/tablet/index.html"  data-icon="fa-cloud" class="cell big top-space-3x"></div>
                <div data-type="label" class="darker top-narrow">Wetter</div>
                <div data-type="pagetab" data-url="/fhem/tablet/index.html"  data-icon="fa-bar-chart" class="cell big top-space-3x"></div>
                <div data-type="label" class="darker top-narrow">Statistik</div>
            </div>
        </div>
    </div>
</body>
</html>

Es geht um die Zeile:
Code Auswählen
<div data-type="pagetab" data-url="/fhem/tablet/index.html"  data-icon="wi wi-strong-wind" class="cell big top-space-3x"></div>

Ein Bildschirmfoto habe ich angehängt.

Schon mal vielen Dank für eure Hilfe.

Yazo

setstate

#1
03 November 2017, 20:22:52
Wenn man das line-height:1; aus der weather-icons.min.css entfernt, passt es.

Ich checke das noch, ob das Nebenwirkungen hat, ansonsten lade ich es gleich hoch.

yamizo

#2
05 November 2017, 10:07:25
Super, jetzt ist das Icon sauber zentriert.

Vielen Dank für die schnelle Hilfe!!

Yano
Drucken
Nach oben Seiten1
Benutzer-Aktionen