Badges in tab-items (2.0)
HTML:

``` html
<nav class="bar-tab">
   <ul class="tab-inner">
      <li class="tab-item active">
         <a href="/challenges/current">
            <i class="tab-icon fa fa-calendar"></i>
            <div class="tab-label">Current</div>
         </a>
      </li>
      <li class="tab-item">
         <a href="/challenges/invites">
            <div class="badge badge-negative badge-filled">3</div>
            <i class="tab-icon fa fa-inbox"></i>
            <div class="tab-label">Invites</div>
         </a>
      </li>
      <li class="tab-item">
         <a href="/challenges/create">
            <i class="tab-icon fa fa-group"></i>
            <div class="tab-label">Create</div>
         </a>
      </li>
   </ul>
</nav>
```

Currently renders like this

![this](https://i.cloudup.com/Y8T3EPIpLA-3000x3000.png)

I think having a badge on a tab is a common use case.

Currently I added this bit of CSS

``` css
.tab-item {
  position: relative
}

.tab-item .badge {
  vertical-align: top;
  position: absolute;
  top: 3px;
  right: 50%;
}
```

To make it render like this

![this](https://i.cloudup.com/g64ATyLKxB-1200x1200.png)

Obviously that bit of CSS is a hack and I'm unsure what the iOS7 guidelines are for this behavior. I'd be interested in hearing your thoughts on this.
