Using Numbers With Font Awesome

Solution 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; }

Solution 2:

Following code will give a circle with a number

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

Following code will give a solid circle with a number

<span class="fa-stack fa-3x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <strong class="fa-stack-1x text-primary">1</strong>
</span>

Here the text-primary class (from bootstrap) is used to set the colour of the number