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.