Ionic Icons Not Aligned

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

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

Solution 2:

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

Solution 3:

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