Ionic-icons nicht ausgerichtet

Bin ich mit dem Ionic-Framework für ein Projekt. Ich änderte die Standardeinstellung font-icons zu Bilder und ich kann nicht richten Sie das Symbol auf der vertikalen position. Siehe Bild unten:

Ionic-icons nicht ausgerichtet

Stil.css:

.icon-requests, .icon-alerts, .icon-companies, .icon-messages, .icon-profile {
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: center center;
    padding-right: 2px;
    padding-left: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin: 0 auto;
    vertical-align: top;
    margin-top: -0.1em;
}
.icon-requests {
    background-image: url("../img/requests.png");
}

.icon-alerts {
    background-image: url("../img/alerts.png");
}

.icon-companies {
    background-image: url("../img/companies.png");
}

.icon-messages {
    background-image: url("../img/messages.png");
}

.icon-profile {
    background-image: url("../img/profile.png");
}

Und die tabs.html

<ion-tabs class="tabs-icon-only">


    <ion-tab icon="icon icon-requests" href="#/tab/requests">
    <ion-nav-view name="tab-requests"></ion-nav-view>
    </ion-tab>

    <ion-tab icon="icon-alerts" href="#/tab/alerts">
    <ion-nav-view name="tab-alerts"></ion-nav-view>
    </ion-tab>

    <ion-tab icon="icon-companies" href="#/tab/companies">
    <ion-nav-view name="tab-companies"></ion-nav-view>
    </ion-tab>

    <ion-tab icon="icon-messages" href="#/tab/messages">
    <ion-nav-view name="tab-messages"></ion-nav-view>
    </ion-tab>

    <ion-tab icon="icon-profile" href="#/tab/profile">
    <ion-nav-view name="tab-profile"></ion-nav-view>
    </ion-tab>

</ion-tabs>

Irgendwelche Ideen, wie ich das beheben kann? Ich habe bereits versucht, einen "Kopie" der Klasse Symbol, die .Ionen-Klasse, aber ohne Erfolg.

Nur ein update, wie vorgeschlagen von @dippas ich versucht zu entfernen, die vertikale-align: top und einige "Pixel" an die background-position. Das problem ist: ich denke, es ist etwas, was die Begrenzung der Größe der Symbole oder ein anderes div oben "Abdeckung" das Bild. Siehe unten für ein update:

Ionic-icons nicht ausgerichtet

da habe ich nicht eine Geige, mit zu arbeiten, ein paar Dinge, die Sie versuchen sollten: entfernen Sie vertical-align: top; - und/oder statt dieser: background-position: center center;probieren Sie etwas wie: background-position: 0 5px;
sorry mis verstanden, ich werde das überprüfen und lassen Sie wissen, wie man es für richtig
verwenden Sie sprite und richten Sie es richtig und die Positionierung verwenden, um es zu platzieren
starkbr - ich sage nicht über das laden der Bilder Größe, sprite können Sie ausrichten, dass die Bilder sachgerecht und in css kann man die position, dann gibt es keine Verwirrung gibt
haben Sie versucht, die Einstellung der Höhe?

InformationsquelleAutor starkbr | 2014-10-15

  1. 1

    Da habe ich nicht eine Geige, mit zu arbeiten, ein paar Dinge, die Sie versuchen sollten:

    • entfernen vertical-align: top;

      und/oder:

    • ändern: background-position: center center; zu
      so etwas wie: background-position: 0 5px;

    weil diese oben genannten Lösungen haben ganz funktioniert (basierend auf deiner Frage update) , sollten Sie dies tun:

    • set height in dieser Zeile: .icon-requests, .icon-alerts,
      .icon-companies, .icon-messages, .icon-profile

    mit, es wird dein problem lösen.

    InformationsquelleAutor dippas

  2. 0

    Ich hatte das gleiche Problem und hier ist, wie ich es gelöst.
    Die <ion-tabs> element, das verwendet wird, um zu schauen, wie diese

    <ion-tabs class="tabs-icon-top tabs-color-active-positive">

    Und jede Registerkarte im inneren hatte es diese Attribute

    <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
   <ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>

    In diesem Fall zeigt es ein Symbol und ein Titel. Sie können entfernen title="Status" wenn Sie wollen nur das Symbol angezeigt werden. Um sicherzustellen, dass es vertikal ausgerichtet, ändern Sie die class-Attribut in <ion-tabs> aus class="tabs-icon-top" zu class="tabs-icon-only" die lösen das problem automatisch.

    Lesen Sie mehr über es hier http://ionicframework.com/docs/components/#icon-only-tabs

    InformationsquelleAutor Zakher Masri

Schreibe einen Kommentar