如何在Font Awesome符号的顶部添加徽章？

Question

如何在Font Awesome符号的顶部添加徽章？

cssfont-awesomebadge

79

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

但是，我不知道如何将徽章放置在符号的顶部。我的尝试在这里: jsFiddle.

我希望它支持Twitter Bootstrap 2.3.2。

- LA_

7个回答

49

虽然@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;
}

- Gerard

这使用内置的Font Awesome方法来堆叠图标。 - John Rah

24

将包含 fa-envelope 和数字的 span 标签用一个 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;
}

希望这能对你有所帮助

- James

14

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

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

- Rafael Herscovici

Bootstrap 4的最佳答案是margin-left: -15px;margin-top: -21px;在所有尺寸上都表现最佳。 - Sol

10

通过将徽章放置在图标元素内，我能够相对于图标容器的边界来定位它。我使用em进行所有尺寸调整，以便徽章的大小相对于图标的大小，并且可以通过简单地更改.badge中的字体大小来更改。

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

- MStrutt

不错的解决方案：通过添加 ::before 和 ::after 的 '.\00a0' {空格}，并删除 'width' 属性，它也可以适应任何宽度的徽章。谢谢！ - Beartums

1

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

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>

- Thomas

0

来自Font Awesome文档:

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

- raveendra_bikkina

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paulie_D · Accepted Answer

这可以通过添加一个新类（您无论如何都会使用的类）和伪元素来实现，无需额外的标记。

JSFiddle演示

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