我想在
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; }