我建议使用Ionic的ion-tabs指令，因为它对badge有“一流”的支持，ion-tab元素有一个“badge”属性，这使得向图标添加文本（在您的例子中是一个数字）变得非常容易。
我在这里写了一个演示：
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>

结果是这样的：

[仅适用于ioinc 1 ]

请参见：http://play.ionic.io/app/52586f24b84d
需要创建一个具有相对位置的类

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

现在，您可以进一步更改徽章的位置，也给边距等跨越与徽章。

在最新的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>

“危险”是你在主题中定义的颜色。
希望对2017年来寻找答案的新朋友有帮助！

以下是2022年（爱奥尼亚6.x）的做法。
您需要在标签标记中使用<ion-badge>：

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="dashboard">
      <ion-icon name="home"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="cart">
      <ion-badge color="danger">11</ion-badge>
      <ion-icon name="cart></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="profile">
      <ion-icon name="person"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

它会给予你一个如下所示的结果：