How can I overlay a number on top of a FontAwesome glyph?

Question

How can I overlay a number between 0 and 99 in the middle of \'icon-star-empty\'?

Answer 1

You css should look something like:

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

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

Answer 2

Here is what I use for counter overlays (badges) with FontAwesome (FA) 5.1. Unlike using the new fa-layers method, this does not require SVG+JS. Simply add a data-count attribute to <i> markup...

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

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.

Note

Untested, but using the same CSS should work with older FA versions by changing fas class to fa instead.

Answer 3

This can also be done using Font Awesome Layers using version 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>

Answer 4

Simply do this from the 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>