0%

Stacked icons in font awesome

Stacked icons

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x class for regular-sized icons, and fa-stack-2x for larger icons.

The fa-inverse class can be used as an alternative icon color. You can also add a larger icon class to the parent to further control the size.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>

<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<br>

<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
fa-ban on fa-camera
fa-twitter on fa-circle-thin
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera