How to stack/overlap more than 2 icons in Font Awesome?

Question

How to stack/overlap more than 2 icons in Font Awesome ?

I have managed to stack/overlap 2 icons like this.

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

http://jsfiddle.net/npLWz/ ref: http://fontawesome.io/examples/#stacked

but when i try to stack/overlap 3 or more icons like this.

<span class="fa-stack fa-3x">
  <i class="fa fa-square-o fa-stack-3x"></i>
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-square-o fa-stack-1x"></i>
</span>

http://jsfiddle.net/npLWz/1/

Its getting messed up, any idea , how can i fix it ? and get 3 or more icons stacked/overlapped on each other.

Cortez

You importet some css and i think the css code just dont accept more overlapping icons. Maybe you have to write your own css code. – Examine

i was thinking maybe font awesome guys can create something like overlapping n number of icons. – Cortez

I was also trying to get this to work. stacking n-icons might be a bit crazy but 3 is very useful. – Soper

Answer 1

I had a similar issue and solved using some custom CSS.

.icon-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  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: 1.5em;
}
.icon-stack-3x {
  font-size: 2em;
}

Markup is therefore:

<span class="icon-stack fa-3x">
   <i class="fa fa-{{whatever icon 3}} icon-stack-3x"></i>
   <i class="fa fa-{{whatever icon 2}} icon-stack-2x"></i>
   <i class="fa fa-{{whatever icon 1}} icon-stack-1x"></i>
</span>

I decided rather than override fa-stack I'd duplicate so I can still use the original CSS if required.

You can obviously play around with the font size, line height etc to suit your own requirements.

Corpuz

Thanks, that works. Sure beats creating custom svg's every time I need a new icon. – Kuroshio

Answer 2

Finally, a new feature from Font-Awesome was released and now you can stack more than 2 icons:

See the following link: https://fontawesome.com/how-to-use/on-the-web/styling/layering

Josh

Answer 3

This feature is currently provided by fontawesome.

See: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

Crenshaw

Actually the CSS and javascript provided by Font Awesome only allows the stacking of 2 icons, more than two does not work. Which is the reason why the question was asked in the first place. – Guava