How to add badge on top of Font Awesome symbol?

I would like to add badge with some number (5, 10, 100) on top of the Font Awesome symbol (fa-envelope). For example:

But, I can not understand how to put the badge on top of the symbol. My attempt is available here: jsFiddle.

I would like to have it support Twitter Bootstrap 2.3.2.

This can be done with no additional mark-up, just a new class (which you would use anyway) and a pseudo element.

JSFiddle Demo

HTML

<i class="fa fa-envelope fa-5x fa-border icon-grey badge"></i>

CSS

*.icon-blue {color: #0088cc}
*.icon-grey {color: grey}
i {   
    width:100px;
    text-align:center;
    vertical-align:middle;
    position: relative;
}
.badge:after{
    content:"100";
    position: absolute;
    background: rgba(0,0,255,1);
    height:2rem;
    top:1rem;
    right:1.5rem;
    width:2rem;
    text-align: center;
    line-height: 2rem;;
    font-size: 1rem;
    border-radius: 50%;
    color:white;
    border:1px solid blue;
}

While @Paulie_D's answer is good, it doesn't work so well when you have a variable width container.

This solution works a lot better for that: http://codepen.io/johnstuif/pen/pvLgYp

HTML:

<span class="fa-stack fa-5x has-badge" data-count="8,888,888">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-bell fa-stack-1x fa-inverse"></i>
</span>

CSS:

.fa-stack[data-count]:after{
  position:absolute;
  right:0%;
  top:1%;
  content: attr(data-count);
  font-size:30%;
  padding:.6em;
  border-radius:999px;
  line-height:.75em;
  color: white;
  background:rgba(255,0,0,.85);
  text-align:center;
  min-width:2em;
  font-weight:bold;
}

Wrap the fa-envelope and the span containing the number in a div and make the wrapper div position:relative and the span position:absolute.

Check this fiddle

HTML used

<div class="icon-wrapper">
   <i class="fa fa-envelope fa-5x fa-border icon-grey"></i>
   <span class="badge">100</span>
</div>

CSS

.icon-wrapper{
    position:relative;
    float:left;
}

*.icon-blue {color: #0088cc}
*.icon-grey {color: grey}
i {   
    width:100px;
    text-align:center;
    vertical-align:middle;
}
.badge{
    background: rgba(0,0,0,0.5);
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 50%;
    position:absolute;
    top:-13px;
    right:-8px;
    padding:5px;
}

Hope this might help you

This seems to work, and it has a very minimal code to be added.

.badge{
  position: relative;
  margin-left: 60%;
  margin-top: -60%;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span class="fa-stack fa-3x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-bell fa-stack-1x fa-inverse"></i>
  <span class="badge">17</span>
</span>
<span class="fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-bell fa-stack-1x fa-inverse"></i>
  <span class="badge">17</span>
</span>
<span class="fa-stack fa-1x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-bell fa-stack-1x fa-inverse"></i>
  <span class="badge">17</span>
</span>

http://jsfiddle.net/zxVhL/16/

By placing the badge inside the icon element I was able to position it relative to the bounds of the icon container. I did all the sizing using ems so that the size of the badge is relative to the size of the icon and this can be changed by simply changing the font-size in .badge

If you're using the SVG + JS version of Font Awesome:

https://fontawesome.com/how-to-use/on-the-web/styling/layering

> Layers are the new way to place icons and text visually on top of each other.

<span class="fa-layers fa-fw">
    <i class="fas fa-envelope"></i>
    <span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>

From Font Awesome documentation:

<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>