HTML & CSS: How to stack Font Awesome icons

/ Chris Nielsen

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.

 

The original solution on Stack Overflow can be seen here:
https://stackoverflow.com/a/25596423/2317066
Font Awesome is here:
https://fontawesome.com/