In order to stack Font Awesome ions, someone wrote a custom CSS solution that features a class called “icons-stack”, which looks like:
.icon-stack { position: relative; display: inline-block; width: 150px; height: 150px; line-height: 80px; vertical-align: middle; } .icon-stack-1x, .icon-stack-2x, .icon-stack-3x { position: absolute; left: 0; width: 100%; text-align: center; } .icon-stack-1x { line-height: inherit; } .icon-stack-2x { font-size: 70px; } .icon-stack-3x { font-size: 150px; }
In the HTML, you would use a span and place the stacked icons inside. These icons will be designated with ‘icon-stack-2x’ or ‘icon-stack-3x’. For example:
<span class="icon-stack"> <i class="fa fa-sun-o icon-stack-3x ot-icons-od"></i> <i class="fas fa-exclamation-triangle icon-stack-2x ot-icons-od"></i> </span>
In this example, I stacked the FA version 4 “fa-sun-o” icon with FA version 5 “fa-exclamation-triangle” icon.
See the Pen how to stack font awesome icons by Chris Nielsen (@Chris_Nielsen) on CodePen.0
The original solution on Stack Overflow can be seen here:
https://stackoverflow.com/a/25596423/2317066
Font Awesome is here:
https://fontawesome.com/