How to fold / overlap more than two icons in an awesome font?

Question

How to fold / overlap more than two icons in an awesome font?

I managed to fold and overlay 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 fit / 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/

They mixed him up, any idea how I can fix this? and get 3 or more icons stacked / overlapping with each other.

Answer 1

I had a similar problem and decided to use some kind of 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; } 

Thus, the markup:

 <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 instead of overriding the fa-stack, which I would duplicate, so I can still use the original CSS if necessary.

Obviously you can play with font size, line height, etc. according to your requirements.