Font-awesome: Icon request: Numbers in circles

[lol768]

Circles with numbers inside them, for step by step stuff:

Could this be part of FA or would a pure CSS approach be better?

[rubenrails]

:+1: +1

[davegandy]

You now have a filled in circle. I'll let you add your own numbers inside with some position:absolute magic.

[Tylney]

"position:absolute magic" - that is great, but for the non-magicians among us, could you maybe please include that as an example on the example page? Thank you so much for these awesome font icons by the way, they make my life so much simpler :)

[bvaughn]

Hi @Tylney I know I'm pretty late to chime in, but in case anyone else stumbles across this question- here's how you could do it. :)

    <span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-inverse fa-stack-1x">1</i>
    </span>

Here's a plunker example.

[pikeas]

This works, but the number is misaligned inside the outer square/circle/etc. The outer icon is aligned to the surrouding text (eg, same baseline), but the inner number is shifted downward.