Font Awesomeシンボルの上にバッジを追加する方法は？

質問

の上に数字（5、10、100）のバッジを付けたいのですが、どうすればよいでしょうか？ フォント・オーサム という記号( fa-envelope ). 例えば

しかし、バッジをシンボルの上に配置する方法がわかりません。私の試みはここにあります。 jsFiddle .

Twitter Bootstrap 2.3.2に対応させてほしいです。

どのように解決するのですか？

これは追加のマークアップなしで、新しいクラス（いずれにせよ使用することになる）と擬似要素だけで行うことができます。

JSFiddleデモ

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