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

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