Come impilare/sovrapporre più di 2 icone in Font Awesome?

Question

Come impilare/sovrapporre più di 2 icone in Font Awesome?

Sono riuscito a impilare/sovrapporre 2 icone come questa.

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

Ma quando provo a impilare/sovrapporre 3 o più icone come questa.

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

Si sta incasinando, qualche idea, come posso risolverlo? E ottieni 3 o più icone impilati/sovrapposti l'uno sull'altro.

Answer 1

Ho avuto un problema simile e risolto usando alcuni CS personalizzati.

.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 è quindi:

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

Ho deciso piuttosto che sovrascrivere FA-Stack, mi sarei duplicato in modo da poter comunque usare il CSS originale, se necessario.

Puoi ovviamente giocare con la dimensione del carattere, l'altezza della linea ecc. Per soddisfare le tue esigenze.

Answer 2

Infine, una nuova funzionalità di Font-Awesome è stato rilasciato e ora puoi impilare più di 2 icone:

Vedi il seguente link: https://fontawesome.com/how-to-use/on-the-web/styling/layering

Answer 3

Questa funzione è attualmente fornita da fontawesome.

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