离子图标未对齐

Question

我正在为项目使用Ionic Framework。 我将默认字体图标更改为图像 ，但无法在垂直位置对齐图标。 见下图：

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所建议的那样，只是一个更新，我尝试删除了vertical-align：top，并在背景位置放置了一些“像素”。 问题是：我认为在“覆盖”图像上方存在一些限制图标或另一个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属性从class="tabs-icon-top"更改为class="tabs-icon-only" ，这将自动解决问题。

在此处详细了解它http://ionicframework.com/docs/components/#icon-only-tabs