我想在
Font Awesome符号(fa-envelope)的顶部添加带有一些数字(5,10,100)的徽章.例如：
但是,我无法理解如何将徽章放在符号的顶部.我的尝试可以在这里找到：jsFiddle.
我想支持Twitter Bootstrap 2.3.2.
解决方法
这可以在没有额外标记的情况下完成,只需要一个新类(无论如何都会使用)和伪元素.
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;
}
