CSS 如何在 Font Awesome 符号上添加徽章？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22735740/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add badge on top of Font Awesome symbol?
提问by LA_
I would like to add badge with some number (5, 10, 100) on top of the Font Awesomesymbol (fa-envelope). For example:
我想在Font Awesome符号 ( fa-envelope) 的顶部添加带有一些数字 (5, 10, 100) 的徽章。例如：
But, I can not understand how to put the badge on top of the symbol. My attempt is available here: jsFiddle.
但是，我无法理解如何将徽章放在符号的顶部。我的尝试在这里可用：jsFiddle。
I would like to have it support Twitter Bootstrap 2.3.2.
我想让它支持 Twitter Bootstrap 2.3.2。
回答by Paulie_D
This can be done with no additional mark-up, just a new class (which you would use anyway) and a pseudo element.
这可以在没有额外标记的情况下完成，只需一个新类（无论如何您都会使用）和一个伪元素。
HTML
HTML
<i class="fa fa-envelope fa-5x fa-border icon-grey badge"></i>
CSS
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;
}
回答by Ger
While @Paulie_D's answer is good, it doesn't work so well when you have a variable width container.
虽然@Paulie_D 的回答很好，但当您有一个可变宽度的容器时，它就不能很好地工作了。
This solution works a lot better for that: http://codepen.io/johnstuif/pen/pvLgYp
此解决方案对此效果更好：http: //codepen.io/johnstuif/pen/pvLgYp
HTML:
HTML：
<span class="fa-stack fa-5x has-badge" data-count="8,888,888">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
</span>
CSS:
CSS：
.fa-stack[data-count]:after{
position:absolute;
right:0%;
top:1%;
content: attr(data-count);
font-size:30%;
padding:.6em;
border-radius:999px;
line-height:.75em;
color: white;
background:rgba(255,0,0,.85);
text-align:center;
min-width:2em;
font-weight:bold;
}
回答by James
Wrap the fa-envelopeand the spancontaining the number in a divand make the wrapper div position:relativeand the spanposition:absolute.
将fa-envelope和span包含在 a 中的数字div包装起来，并使包装器 divposition:relative和spanposition:absolute.
Check this fiddle
检查这个小提琴
HTML used
使用的 HTML
<div class="icon-wrapper">
<i class="fa fa-envelope fa-5x fa-border icon-grey"></i>
<span class="badge">100</span>
</div>
CSS
CSS
.icon-wrapper{
position:relative;
float:left;
}
*.icon-blue {color: #0088cc}
*.icon-grey {color: grey}
i {
width:100px;
text-align:center;
vertical-align:middle;
}
.badge{
background: rgba(0,0,0,0.5);
width: auto;
height: auto;
margin: 0;
border-radius: 50%;
position:absolute;
top:-13px;
right:-8px;
padding:5px;
}
Hope this might help you
希望这可以帮助你
回答by Dementic
This seems to work, and it has a very minimal code to be added.
这似乎有效，并且要添加的代码非常少。
.badge{
position: relative;
margin-left: 60%;
margin-top: -60%;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
<span class="badge">17</span>
</span>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
<span class="badge">17</span>
</span>
<span class="fa-stack fa-1x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
<span class="badge">17</span>
</span>回答by MStrutt
By placing the badge inside the icon element I was able to position it relative to the bounds of the icon container. I did all the sizing using ems so that the size of the badge is relative to the size of the icon and this can be changed by simply changing the font-size in .badge
通过将徽章放置在图标元素内，我能够相对于图标容器的边界定位它。我使用ems进行了所有调整，以便徽章的大小相对于图标的大小，这可以通过简单地更改字体大小来更改.badge
