Ionic icons not aligned

Question

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:

Answer 1

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.

Answer 2

I had the same issue and here's how I solved it. The <ion-tabs> element used to look like this

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

And each tab inside it had these attributes

<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 this case it will show an icon and a title. You can remove title="Status" if you only want the icon to be displayed. In order to make sure it's aligned vertically, change the class attribute in <ion-tabs> from class="tabs-icon-top" to class="tabs-icon-only" which will solve the problem automatically.

Read more about it here http://ionicframework.com/docs/components/#icon-only-tabs

Answer 3

This will help you.

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