Stack Icons

You can stack our icons easily with the support styling bundled with Font Awesome.

To stack multiple icons, use the fa-stack class on the parent HTML element of the 2 icons you want to stack. Then add the fa-stack-1x class for the regularly sized icon and add the fa-stack-2x class for the larger icon. fa-inverse can be added to the icon with the fa-stack-1x to help with a knock-out looking effect. You can even throw larger icon classes on the parent to get further control of sizing.

  <span class="fa-stack fa-2x">
    <i class="fas fa-square fa-stack-2x"></i>
    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
  </span>
  <span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
  </span>
  <span class="fa-stack fa-2x">
    <i class="fas fa-square fa-stack-2x"></i>
    <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
  </span>
  <span class="fa-stack fa-4x">
    <i class="fas fa-square fa-stack-2x"></i>
    <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
  </span>
  <span class="fa-stack fa-2x">
    <i class="fas fa-camera fa-stack-1x"></i>
    <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
  </span>

Aligning Stacked and Regular Icons

You can use stacked icons right alongside single icons. Since stacked icons are styled by our framework’s included CSS to be twice the size of single icons, you’ll need to either size down the stacked icon or size up the single icons.

  <i class="far fa-circle fa-2x"></i>
  <span class="fa-stack" style="vertical-align: top;">
    <i class="far fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x"></i>
  </span>
  <span class="fa-stack" style="vertical-align: top;">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
  </span>
  <i class="far fa-circle fa-2x"></i>

Changing the Default Font Size with Stacking

When you stack icons but change the font-size, you’ll need to make some adjustments to your CSS to keep the icons aligned.

  <style>
    .fa-stack.small { font-size: 0.5em; }
    i { vertical-align: middle; }
  </style>
  <i class="far fa-circle"></i>
  <span class="fa-stack small">
    <i class="far fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x"></i>
  </span>
  <span class="fa-stack small">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
  </span>
  <i class="far fa-circle"></i>

Stacking Classes

Class	Details
`fa-stack`	Used on a parent HTML element of the two icons to be stacked
`fa-stack-1x`	Used on the icon which should be displayed at base size when stacked
`fa-stack-2x`	Used on the icon which should be displayed larger when stacked
`fa-inverse`	Inverts the color of the icon displayed at base size when stacked