CSS 如何在 FontAwesome 字形上叠加一个数字？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17737182/
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 can I overlay a number on top of a FontAwesome glyph?
提问by Nescio
How can I overlay a number between 0 and 99 in the middle of 'icon-star-empty'?
如何在“icon-star-empty”中间覆盖 0 到 99 之间的数字？
采纳答案by StackSlave
You css should look something like:
你的 css 应该是这样的：
.contain-i-e-s,.icon-empty-star,.text-i-e-s{
height:100px; width:100px;
}
.contain-i-e-s{
position:relative;
}
.text-i-e-s{
text-align:center; position:absolute;
}
Your HTML might look like:
您的 HTML 可能如下所示：
<div class='contain-i-e-s'>
<i class='icon-empty-star'></i>
<div class='text-i-e-s'>99</div>
</div>
回答by nilsi
Simply do this from the Font Awesome docs on Stacked Icons:
只需从Stacked Icons 上的Font Awesome 文档中执行此操作：
<span class="fa-stack fa-lg">
<i class="fa fa-star-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">1</i>
</span>
回答by Fakhruddin Ujjainwala
This can also be done using Font Awesome Layersusing version 5.0
这也可以使用Font Awesome Layers使用 5.0 版来完成
<div class="fa-4x">
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-circle" style="color:Tomato"></i>
<i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-bookmark"></i>
<i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
<i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
<i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
<i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-calendar"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-certificate"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>
</div>
回答by Mavelo
Here is what I use for counter overlays (badges) with FontAwesome (FA) 5.1. Unlike using the new fa-layersmethod, this does not require SVG+JS. Simply add a data-countattribute to <i>markup...
这是我在 FontAwesome (FA) 5.1 中用于计数器叠加（徽章）的内容。与使用新fa-layers方法不同，这不需要 SVG+JS。只需data-count在<i>标记中添加一个属性...
CSS
CSS
.fas[data-count]{
position:relative;
}
.fas[data-count]:after{
position: absolute;
right: -0.75em;
top: -.75em;
content: attr(data-count);
padding: .5em;
border-radius: 10em;
line-height: .9em;
color: white;
background: rgba(255,0,0,.75);
text-align: center;
min-width: 2em;
font: bold .4em sans-serif;
}
Markup
标记
<i class="fas fa-envelope" data-count="8"></i>
<i class="fas fa-address-book fa-lg" data-count="16"></i>
<i class="fas fa-bookmark fa-2x" data-count="4"></i>
<i class="fas fa-angry fa-3x" data-count="32"></i>
<i class="fas fa-bell fa-4x" data-count="2"></i>
Example
例子
Conclusion
结论
Some FA icon sizes may require badge size/position tweaking, but works well for my purposes. All colors/positions can be adjusted for calendar overlays, text labels, or OP's star outline.
某些 FA 图标大小可能需要调整徽章大小/位置，但很适合我的目的。可以针对日历叠加、文本标签或 OP 的星形轮廓调整所有颜色/位置。
Note
笔记
Untested, but using the same CSS shouldwork with older FA versions by changing fasclass to fainstead.
未经测试，但使用相同的 CSS应该可以通过将fasclass 改为fa来与较旧的 FA 版本一起使用。
