How to add badge on top of Font Awesome symbol?

Question

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.

Answer 1

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; } 

Answer 2

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; }