Sound tab icon

Question

I am trying to add an icon to my tab icons. Current Result: http://play.ionic.io/app/decfc14cb171

Does anyone know how to put them in the upper right corner of each icon?

I tried to use , but this turned out to be more problematic in other aspects, although with the attribute “icon” it was easier to achieve the desired effect. Is there a way to play it without using ion tabs?

Answer 1

[only works for ioinc 1]

See this: http://play.ionic.io/app/52586f24b84d
You need to create a class with a relative position

.badge-container{
      position: relative;
}

<i> ,

<i class="icon ion-home badge-container"><span class="badge badge-assertive">3</span></i>

<i class="icon ion-ios-paper badge-container"><span class="badge badge-assertive">5</span></i>

, .. .

Answer 2

Ionic ion-tabs, " " . "" "", ( ) .

-:

http://play.ionic.io/app/c6e96276e8fd

:

<ion-tabs class="tabs-icon-top tabs-striped">

 <ion-tab title="Home" icon="ion-home" href="#/tab/home" badge="3" badge style="badge-assertive">
   <ion-nav-view name="home-tab"></ion-nav-view>
 </ion-tab>

 <ion-tab title="About" icon=" ion-ios-paper" href="#/tab/about" badge="5" badge-style="badge-assertive">
   <ion-nav-view name="about-tab"></ion-nav-view>
 </ion-tab>

</ion-tabs>

:

Answer 3

Ionic :

tabBadget tabBadgetStyle , :

 <ion-tabs>
      <ion-tab tabIcon="call" [root]="tabOne" tabBadge="3" tabBadgeStyle="danger"></ion-tab>
      <ion-tab tabIcon="chatbubbles" [root]="tabTwo" tabBadge="14" tabBadgeStyle="danger"></ion-tab>
      <ion-tab tabIcon="musical-notes" [root]="tabThree"></ion-tab>
    </ion-tabs>

"" - , ...

Hope this helps the new ones who will find the answer in 2017!