Cómo usar números en íconos con FontAwesome

Actualmente en FontAwesome no hay ninguna clase de un tipo (con el icono) como fa-number-1, fa-number-2, fa-number-3 etc., que te permiten crear un icono con un número. Pero por qué? Bueno, básicamente porque no necesitas una fuente personalizada para mostrar solo números , escribe algo de html y CSS para ello. Sin embargo, es posible envolver algún número dentro de un icono de FontAwesome y puede ser realmente útil.

Para lograr esto, usaremos el enfoque con la fa-stackclase de FontAwesome. Por lo general, para apilar varios iconos, puede usar la clase fa-stack en el padre, luego asignar alguna clase stack-xSize en el icono para especificar el tamaño del icono y fa-stack-2x para el icono más grande. Por ejemplo, el ícono de Twitter dentro de un cuadrado se puede lograr usando el siguiente marcado:

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

Eso debería generar el siguiente icono:

Puede usar el mismo truco para configurar contenido personalizado dentro de cualquier ícono siempre que el padre no esté lleno .

Números dentro de los iconos

Como se mencionó, deberá crear un intervalo de contenedor con la clase fa-stack. Este nodo contendrá 2 elementos más, otro tramo con la faclase, la clase de icono fa-<icon>y la fa-stack-<size>clase y un elemento fuerte con la fa-stack-<size>clase nuevamente, dentro del nodo fuerte establecerá el número que desea dentro con texto plano. El tamaño de la pila del elemento que estará dentro del icono debe ser obviamente más bajo que el tamaño del contenedor:

<!-- Crea un icono envuelto por la clase fa-stack -->
<span class="fa-stack">
    <!-- El icono que envolverá el número -->
    <span class="fa fa-circle-o fa-stack-2x"></span>
    <!-- un elemento strong con el contenido personalizado, en este caso un número -->
    <strong class="fa-stack-1x">
        2    
    </strong>
</span>

El marcado anterior generará el siguiente icono:

De la misma manera que cambias el tamaño de los iconos con FA utilizando fa-sizex, puedes cambiar el contenido de los elementos de la pila utilizando en su lugar usando fa-stack-2x, fa-stack-3x, fa-stack-4x, o fa-stack-5xclases. Alternativamente, puede probar con otros íconos para generar resultados asombrosos. Por ejemplo, el siguiente marcado:

<!-- Crea un icono envuelto por la clase fa-stack -->
<span class="fa-stack">
    <!-- El icono que envolverá el número -->
    <span class="fa fa-battery-empty fa-stack-2x"></span>
    <!-- un elemento strong con el contenido personalizado, en este caso un número-->
    <strong class="fa-stack-1x" style="font-size:80%;">
        25%
    </strong>
</span>

Generará un icono de una batería con contenido personalizado que muestra el porcentaje disponible de la batería: