¿Cómo apilar/superponer más de 2 iconos en Font Awesome?

Question

¿Cómo apilar/superponer más de 2 iconos en Font Awesome?

He logrado apilar/superponer 2 iconos como este.

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

Pero cuando trato de apilar/superponer 3 o más íconos como este.

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

Se está desordenando, alguna idea, ¿cómo puedo solucionarlo? y obtenga 3 o más íconos apilados/superpuestos entre sí.

Answer 1

Tuve un problema similar y resuelto usando algunos CSS personalizados.

.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;
}

El marcado es, por lo tanto,:

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

Decidí, en lugar de anular la pila FA, duplicaría para poder usar el CSS original si fuera necesario.

Obviamente, puede jugar con el tamaño de fuente, la altura de línea, etc. para adaptarse a sus propios requisitos.

Answer 2

Finalmente, una nueva característica de Espantoso fue lanzado y ahora puedes apilar más de 2 iconos:

Vea el siguiente enlace: https://fontawesome.com/how-to-use/on-the-web/styling/layering

Answer 3

Esta característica se proporciona actualmente por avanzado.

Ver: https://fontawesome.com/how-to-use/on-theweb/styling/stacking-icons