Font Awesome Number Icons Sandbox

Add numbers or custom content inside font awesome icons

by Carlos Delgado

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Create an icon wrapped by the fa-stack class -->
<span class="fa-stack">
    <!-- The icon that will wrap the number -->
    <span class="fa fa-square-o fa-stack-2x"></span>
    <!-- a strong element with the custom content, in this case a number -->
    <strong class="fa-stack-1x">
        1    
    </strong>
</span>

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

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

CSS

body{
  font-size:50px;
}