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