Ионные иконы не выровнены

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, я попытался удалить вертикальную выровненную вершину и поместить некоторые «пиксели» в фоновое положение. Проблема в том, что я думаю, что есть что-то, ограничивающее размер значков или другого div выше «покрытия» изображения. Смотрите ниже обновление:

Answer 1

Поскольку я не скрипка, чтобы работать с, парой вещи, которые вы должны попробовать:

• удалитьvertical-align: top;

  и/или:

• chang chang е это: background-position: center center; к что-то вроде: background-position: 0 5px;

, потому что эти решения выше работали не совсем (основано на обновлении вашего вопроса в), вы должны сделать это:

• наборheight в этом line: .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