如何添加徽章在字体真棒符号的顶部? [英] How to add badge on top of font awesome symbol?
本文介绍了如何添加徽章在字体真棒符号的顶部?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在字体真棒符号顶部添加一些数字(5,10,100)的徽章
( fa-envelope
),请参阅图片它如何看起来像。
但我不明白如何将徽章放在符号顶部 - jsFiddle 。
I would like to add badge
with some number (5, 10, 100) on top of the font awesome symbol (fa-envelope
), see the picture how it can look like.
But I can not understand how to put the badge on top of the symbol - jsFiddle. I would like to have it supported where Twitter Bootstrap 2.3.2 is supported.
推荐答案
这可以在没有额外的mark-
This can be done with no additional mark-up just a new class (which you would use anyway) and a pseudo element.
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;
}
这篇关于如何添加徽章在字体真棒符号的顶部?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文