Как складывать/перекрывать более двух значков в шрифте Awesome?

Question

Как складывать/перекрывать более двух значков в шрифте Awesome?

У меня есть возможность складывать/перекрывать 2 значка, подобные этому.

<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/ исх: http://fontawesome.io/examples/#stacked

, но когда я пытаюсь сложить/перекрываться 3 или более иконки, как это.

<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/

его получение перепутались, ни малейшего представления, как я могу это исправить? и получите 3 или более значка, совпадающие друг с другом.

Answer 1

У меня была аналогичная проблема и я решил использовать некоторые пользовательские 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 поэтому:

<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> 

я решил вместо переопределения фа-стек, я бы дублировать, так что я могу по-прежнему использовать оригинальный CSS, если это необходимо.

Возможно, вы можете поиграть с размером шрифта, высотой линии и т. Д., Чтобы соответствовать вашим собственным требованиям.