How to use numbers on icons with FontAwesome

Currently in FontAwesome there's no such a class (with icon) like fa-number-1, fa-number-2, fa-number-3 etc that allow you to create an icon with a number. But why ? Well, basically because you don't need a custom font to display only numbers, write some html and CSS for it. However to wrap some number inside an icon of FontAwesome is possible and can be really useful.

To achieve this, we'll use the approach with the fa-stack class of FontAwesome. Usually in order to stack multiple icons, you can use the fa-stack class on the parent, then assign some stack-xSize class on the icon to specify the size of the icon, and fa-stack-2x for the larger icon. For example, the twitter icon inside a square can be achieved using the following markup:

<span class="fa-stack fa-lg">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x"></i>
</span>

That should generate the following icon:

You can use the same trick to set some custom content inside any icon as long as the parent it isn't filled.

Numbers inside icons

As mentioned, you will need to create a container span with the fa-stack class. This node will contain 2 items more, another span with the fa class, the icon class fa-<icon> and the fa-stack-<size> class and a strong element with the fa-stack-<size> class again, inside the strong node you will set the number that you want inside with plain text. The size of the stack of the item that will be inside of the icon needs to be obviously lower than the container size:

<!-- Create an icon wrapped by the fa-stack class -->
<span class="fa-stack">
    <!-- The icon that will wrap the number -->
    <span class="fa fa-circle-o fa-stack-2x"></span>
    <!-- a strong element with the custom content, in this case a number -->
    <strong class="fa-stack-1x">
        2    
    </strong>
</span>

The previous markup will generate the following icon:

In the same way that you resize icons with fa using fa-sizex, you can change the content of the stack elements by using instead using fa-stack-2x, fa-stack-3x, fa-stack-4x, or fa-stack-5x classes. Alternatively you can test with other icons to generate awesome results. For example, the following markup:

<!-- Create an icon wrapped by the fa-stack class -->
<span class="fa-stack">
    <!-- The icon that will wrap the number -->
    <span class="fa fa-battery-empty fa-stack-2x"></span>
    <!-- a strong element with the custom content, in this case a number -->
    <strong class="fa-stack-1x" style="font-size:80%;">
        25%
    </strong>
</span>

Will generate an icon of a battery with custom content that displays the available percent of the battery: