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

Question

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

Answer 1

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>

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>
<i class="fas fa-address-book fa-lg" data-count="16"></i>
<i class="fas fa-bookmark fa-2x" data-count="4"></i>
<i class="fas fa-angry fa-3x" data-count="32"></i>
<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

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>