如何在 Font Awesome 符号上添加徽章？答案

【问题标题】：How to add badge on top of Font Awesome symbol?如何在 Font Awesome 符号上添加徽章？
【发布时间】：2014-05-09 06:24:42
【问题描述】：

我想在 Font Awesome 符号 (fa-envelope) 顶部添加带有一些数字 (5、10、100) 的徽章。例如：

但是，我不明白如何将徽章放在符号顶部。我的尝试可以在这里找到：jsFiddle。

我希望它支持 Twitter Bootstrap 2.3.2。

【问题讨论】：

标签： css font-awesome badge

【解决方案1】：

如果您使用的是 SVG + JS 版本的 Font Awesome：

https://fontawesome.com/how-to-use/on-the-web/styling/layering

图层是将图标和文本在视觉上相互叠加的新方法。

<span class="fa-layers fa-fw">
    <i class="fas fa-envelope"></i>
    <span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>

【讨论】：

【解决方案2】：

这似乎可行，并且需要添加的代码非常少。

.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>

【讨论】：

bootstrap 4 的最佳答案以及 margin-left: -15px;margin-top: -21px;在所有尺寸上都最适合我

【解决方案3】：

这可以在没有额外标记的情况下完成，只需一个新类（无论如何你都会使用）和一个伪元素。

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;
}

【讨论】：

谢谢！有什么办法可以将content 从 css 移到 html 中？
除非你像<span> 这样沿着额外的元素路线走，尽管你可以像这样使用data-attribute：jsfiddle.net/zxVhL/18
对 Paulie_D 的评论和 jsfiddle 的扩展：当从 html 中传入带有数据属性（例如 data-count）的参数时，您可以使用 .badge[data-count="0" 隐藏徽章]:after{ 显示：无； }
对于 IE 11.0.900.18097 - 当我预计它会在中间时，该数字位于徽章的顶部。我将伪元素的 line-height 从 rem 更改为 em 并且它起作用了。关于这个问题有一个ie bug：connect.microsoft.com/IE/feedback/details/776744
现在是现在写这个答案的时候还不是。

【解决方案4】：

虽然@Paulie_D 的回答很好，但当你有一个可变宽度的容器时，它就不能很好地工作了。

这个解决方案效果更好：http://codepen.io/johnstuif/pen/pvLgYp

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：

.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;
}

【讨论】：

【解决方案5】：

http://jsfiddle.net/zxVhL/16/

通过将徽章放置在图标元素中，我能够相对于图标容器的边界定位它。我使用ems 完成了所有大小调整，以便徽章的大小与图标的大小相关，这可以通过简单地更改.badge 中的字体大小来进行更改@

【讨论】：

不错的解决方案：通过添加 '.\00a0' {space) 的 ::before 和 ::after 并删除 'width' 属性，它也可以调整为任何宽度徽章。谢谢！

【解决方案6】：

将包含数字的fa-envelope 和span 包装在div 中，并制作包装器div position:relative 和span position:absolute。

查看fiddle

使用的 HTML

<div class="icon-wrapper">
   <i class="fa fa-envelope fa-5x fa-border icon-grey"></i>
   <span class="badge">100</span>
</div>

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;
}

希望对你有帮助

【讨论】：