离子图标不对齐 [英] Ionic icons not aligned

问题描述

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

p>

style.css：

  .icon-requests，.icon-警报，.icon-companies，.icon-messages，.icon-profile {
 background-size：32px 32px; 
背景重复：不重复; 
 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-requestshref =＃/ tab / requests> 
< ion-nav-view name =tab-requests>< / ion-nav-view> 
< / ion-tab> 
 
< ion-tab icon =icon-alertshref =＃/ tab / alerts> 
< ion-nav-view name =tab-alerts>< / ion-nav-view> 
< / ion-tab> 
 
< ion-tab icon =icon-companieshref =＃/ tab / companies> 
< ion-nav-view name =tab-companies>< / ion-nav-view> 
< / ion-tab> 
 
< ion-tab icon =icon-messageshref =＃/ tab / messages> 
< ion-nav-view name =tab-messages>< / ion-nav-view> 
< / ion-tab> 
 
< ion-tab icon =icon-profilehref =＃/ tab / profile> 
< ion-nav-view name =tab-profile>< / ion-nav-view> 
< / ion-tab> 
 
< / ion-tabs> 
  

如何解决此问题的任何想法？我已经尝试复制类图标，.ion类，但没有成功。

只是一个更新，正如@dippas所建议的，我试图去除垂直-align：顶部并在背景位置放置一些像素。问题是：我认为有一些东西限制了图片的大小或上面覆盖图片的其他div。请参阅下面的更新：

解决方案

因为我没有小工具可以使用，所以有几件事你应该尝试：

• 删除 vertical-align：top;

  
  
  

  和/或：




• 更改 c> background-position：center center; 为
  类似于： background-position：0 5px;

因为上面的这些解决方案确实有效（根据您的问题的更新），您应该这样做：

• set height ： .icon -requests，.icon-alerts，
  .icon-companies，.icon-messages，.icon-profile

，它可以解决你的问题。

I am using Ionic Framework for a project. I changed the default font icons to images and I can't align the icon at the vertical position. See image below:

The 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");
}

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

Any ideas of how can I fix this? I already tried to "copy" the class icon, the .ion class, but without success.

Just an update, as suggested by @dippas I tried to remove the vertical-align: top and put some "pixels" at the background-position. The problem is: I think there is something limiting the size of the icons or another div above "covering" the image. See below for an update:

解决方案

Since I don't have a fiddle to work with, a couple a things you should try:

• remove vertical-align: top;

  and/or:

• change this: background-position: center center; to something like: background-position: 0 5px;

because these solutions above did quite work (based on your question's update) , you should do this:

• set height in this line: .icon-requests, .icon-alerts, .icon-companies, .icon-messages, .icon-profile

with that it will fix your problem.

这篇关于离子图标不对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！