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

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

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.