离子图标不对齐(Ionic icons not aligned)

我使用的离子框架的项目。我改变了默认字体图标 ，图像，我不能对齐在垂直位置的图标。见下图：

在style.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");
}

而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>

如何任何想法，我可以解决这个问题？我已经试图“复制”之类的图标，.ion类，但没有成功。

只是一个更新，通过@dippas的建议我试图删除垂直对齐：顶部，并把一些“像素”的背景位置。问题是：我认为有一些限制的图标的尺寸或以上“覆盖”的形象另一个DIV。请参阅下面的更新：

Answer 1:

由于我没有摆弄着，一对夫妇要工作的事情你应该尝试：

除去 vertical-align: top;
和/或：
改变这种： background-position: center center; 喜欢的东西： background-position: 0 5px;

因为这些解决方案上面也相当的工作（根据你的问题的更新），你应该这样做：

集 height在这一行： .icon-requests, .icon-alerts, .icon-companies, .icon-messages, .icon-profile

与它会解决您的问题。

Answer 2:

这将帮助你。

 .tabs .tab-item .icon.mcfly { background-repeat: no-repeat; background-position: 50%; height: 100%; background-image: url('../img/home.png'); background-size:contain; }

 <ion-tab icon="icon icon-home" href="#/tab/requests" icon-on="mcfly" icon-off="mcfly">

Answer 3:

我有同样的问题，这里是我如何解决它。所述<ion-tabs>元件用于看起来像这样

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

和里面的每个选项卡中有这些属性

<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>

在这种情况下，它会显示一个图标和标题。您可以删除title="Status"如果你只想要显示的图标。为了确保它的垂直排列，在类属性改变<ion-tabs>从class="tabs-icon-top"到class="tabs-icon-only"它会自动解决这个问题。

了解更多关于在这里http://ionicframework.com/docs/components/#icon-only-tabs

文章来源: Ionic icons not aligned