css - 如何在 Font Awesome 符号上添加徽章？

Question

我想在 Font Awesome 顶部添加带有一些数字 (5, 10, 100) 的徽章符号 (fa-envelope)。例如:

但是，我不明白如何将徽章放在符号之上。我的尝试可以在这里找到:jsFiddle .

我想让它支持 Twitter Bootstrap 2.3.2。

Answer 1

这可以在没有额外标记的情况下完成，只需一个新类(无论如何您都会使用它)和一个伪元素。

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