Comment empiler / chevaucher plus de 2 icônes dans Font génial?

Question

Comment empiler / chevaucher plus de 2 icônes dans Font génial?

J'ai réussi à empiler / chevaucher 2 icônes comme celle-ci.

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

Mais quand j'essaie d'empiler / de chevaucher 3 icônes ou plus comme celle-ci.

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

Il se gâche, une idée, comment puis-je le réparer? et obtenez 3 icônes ou plus empilées / se chevauchant les unes sur les autres.

Answer 1

J'ai eu un problème similaire et j'ai résolu en utilisant des CSS personnalisés.

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

Le balisage est donc:

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

J'ai décidé plutôt que de remplacer FA-Stack que je me double, afin que je puisse toujours utiliser le CSS d'origine si nécessaire.

Vous pouvez évidemment jouer avec la taille de la police, la hauteur de ligne, etc. pour répondre à vos propres besoins.

Answer 2

Enfin, une nouvelle fonctionnalité de Forêt a été libéré et maintenant vous pouvez empiler plus de 2 icônes:

Voir le lien suivant: https://fontawesome.com/how-to-use/on-the-web/styling/layering

Answer 3

Cette fonctionnalité est actuellement fournie par Fontawesome.

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