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:

• removevertical-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:

• setheight 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-tabicon="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-tabtitle="Status"icon-off="ion-ios-pulse"icon-on="ion-ios-pulse-strong"href="#/tab/dash"><ion-nav-viewname="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