web-dev-qa-db-ja.com

Font Awesomeグリフの上に数字をオーバーレイするにはどうすればよいですか？

「icon-star-empty」の真ん中に0〜99の数字を重ねるにはどうすればよいですか？

cssfont-awesome
29
Nescio

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

HTMLは次のようになります。

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

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>

Font Awesome Docs Screenshot

121
nilsi

これは 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>

enter image description here

7
Fakhruddin Ujjainwala

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>

例

FontAwesome 5.x Badge Counter Overlays

結論

一部のFAアイコンサイズでは、バッジサイズ/位置の調整が必要になる場合がありますが、私の目的には適しています。すべての色/位置は、カレンダーオーバーレイ、テキストラベル、またはOPのスターアウトラインに合わせて調整できます。

注

未テストですが、同じCSSshouldを使用すると、代わりにfasクラスをfaに変更することで、古いFAバージョンで動作します。

6
Mavelo