如何在Font Awesome字形上叠加数字？

Question

如何在'icon-star-empty'中间覆盖0到99之间的数字？

Answer 1

只需从Font Awesome docs on Stacked Icons：

执行此操作

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

Answer 2

这也可以使用版本5.0

使用Font Awesome Layers完成

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

Answer 3

你应该看起来像：

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

您的HTML可能如下所示：

<div class='contain-i-e-s'>
  <i class='icon-empty-star'></i>
  <div class='text-i-e-s'>99</div>
</div>

Answer 4

这是我用FontAwesome（FA）5.1进行计数器覆盖（徽章）的用途。与使用新的fa-layers方法不同，这不需要SVG + JS。只需将data-count属性添加到<i>标记...

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

标记

<i class="fas fa-envelope" data-count="8"></i> &nbsp;
<i class="fas fa-address-book fa-lg" data-count="16"></i> &nbsp;
<i class="fas fa-bookmark fa-2x" data-count="4"></i> &nbsp;
<i class="fas fa-angry fa-3x" data-count="32"></i> &nbsp;
<i class="fas fa-bell fa-4x" data-count="2"></i>

示例

结论

某些FA图标的尺寸可能需要调整徽章的尺寸/位置，但对我而言效果很好。可以为日历叠加层，文本标签或OP的星形轮廓调整所有颜色/位置。

注意

未经测试，但是使用相同的CSS，应该可以通过将fas类更改为fa来与较旧的FA版本一起使用。