Facebook Style Counters on Bootstrap and Fontawesome Icons

menu.html

<ul class="nav nav-tabs">
    <a class="btn btn-default"><i class="fa fa-database"><span class="icon_counter icon_counter_red">5</span></i></a>
    <a class="btn btn-default"><i class="fa fa-envelope"><span class="icon_counter icon_counter_blue">5</span></i></a>
    <a class="btn btn-default"><i class="fa fa-fax"><span class="icon_counter icon_counter_green">5</span></i></a>
</ul>

style.css

.icon_counter_red {
    background-color      : #f00;
}

.icon_counter_blue {
    background-color      : #39f;
}

.icon_counter_green {
    background-color      : #3c3;
}

.icon_counter {
    color                 : #fff;
    font-family           : "Arial";
    font-size             : 14px;
    font-weight           : 600;
    
    position              : absolute;

    padding               : 0px 2px;
    margin-top            : 6px;
    margin-left           : -3px;

    -webkit-border-radius : 3px;
    -moz-border-radius    : 3px;
    border-radius         : 3px;

    -webkit-box-shadow    : inset 0px 0px 2px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow       : inset 0px 0px 2px 0px rgba(50, 50, 50, 0.75);
    box-shadow            : inset 0px 0px 2px 0px rgba(50, 50, 50, 0.75);
}