How to use only icons in ion-tabs or how to use tabs class in tabs-template

Hello, @mhartington @ionicCommunity please have another question for you.
i have a tab-template project with code like this:

 <ion-tabs class="tabs-top tabs-striped ">
       <ion-tab title="First Tab" 
                  icon-on="ion-android-bookmark" 
                href="#/tab/first">
        <ion-nav-view name="tab-first"></ion-nav-view>
      </ion-tab>
       <ion-tab title="Second Tab" 
                  icon-on="ion-android-bookmark" 
                href="#/tab/second">
        <ion-nav-view name="tab-second"></ion-nav-view>
      </ion-tab>
    </ion-tabs>

here is my directives for the ion-tabs which is working fine. :

.state(‘tab’, {
url: “/tab”,
abstract: true,
templateUrl: “templates/tabs.html”
})
.state(‘tab.first’, {
url: ‘/first’,
views: {
‘tab-dash’: {
templateUrl: ‘templates/tab-first.html’,
controller: ‘FirstCtrl’
}
}
})
.state(‘tab.second’, {
url: ‘/second’,
views: {
‘tab-second’: {
templateUrl: ‘templates/tab-second.html’,
controller: ‘SecondCtrl’
}
}
})

But what i want is to really achieve this with icons only. since the above code does not allow me use only icons.
Code with icons only: below

<div class="tabs tabs-icon-only">
      <a class="tab-item">
        <i class="icon ion-home"></i>
      </a>
      <a class="tab-item">
        <i class="icon ion-star"></i>
      </a>
      <a class="tab-item">
        <i class="icon ion-gear-a"></i>
      </a>
    </div>

Do i have to change something in my directives (app.js)??

I should mention that am using external templates and ion-nav-views.
Please your help is appreciated as always.

Ok thanks everyone, i solved this. Only had to remove the title="" tag.
Thanks for your help

Actually, the correct way is to use the tabs-icon-only class on ion-tabs.

1 Like

I’m using ionic 2.2.1, and the way to do this is as follows:

reference: