Using Numbers With Font Awesome

Question

I want to use numbers to list steps in a process. I was curious about how to do this with Font Awesome.

I'd like to use circles with a 1, 2, 3... in it. Is this possible?
Will Font Awesome be adding numbers to the list of icons?

Thanks!

Answer 1

Font awesome actually has built-in support for stacking regular text (i.e. numbers, letters, ..) on top of icons.

Here is a nice example of a calendar icon with the actual day of the month as plain text. As the post also explains you might need to throw in some extra styling for optimal positioning.

HTML:

<span class="fa-stack fa-3x">   <i class="fa fa-calendar-o fa-stack-2x"></i>   <strong class="fa-stack-1x calendar-text">27</strong> </span> 

CSS:

.calendar-text { margin-top: .3em; }