css – 如何添加徽章顶部的字体真棒符号？

我想添加一些数字(5，10，100)的徽章在字体真棒符号(fa信封)之上，看到 the picture它可以看起来像。
但我不明白如何将徽章放在符号的顶部 – jsFiddle.我想支持Twitter Bootstrap 2.3.2的支持。

解决方法

这可以通过没有额外的标记来完成，只是一个新的类(你将使用它)和一个伪元素。

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

原文地址：https://www.jb51.cc/css/219623.html