Wie stapel/überlappen ich mehr als 2 Symbole in Schriftart?

Question

Wie stapel/überlappen ich mehr als 2 Symbole in Schriftart?

Ich habe es geschafft, 2 Ikonen wie diese zu stapeln/zu überlappen.

<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

Aber wenn ich versuche, 3 oder mehr Symbole wie diese zu stapeln/zu überlappen.

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

Es wird durcheinander, irgendeine Idee, wie kann ich es beheben? und lassen Sie 3 oder mehr Symbole gestapelt/überlappen.

Answer 1

Ich hatte ein ähnliches Problem und habe mit einigen benutzerdefinierten CSS gelöst.

.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 ist daher:

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

Ich habe mich entschieden, FA-Stack zu überschreiben, das ich duplizieren würde, damit ich bei Bedarf immer noch das ursprüngliche CSS verwenden kann.

Sie können offensichtlich mit der Schriftgröße, der Linienhöhe usw. herumspielen, um Ihren eigenen Anforderungen zu entsprechen.

Answer 2

Schließlich eine neue Funktion von Schriftart wurde veröffentlicht und jetzt können Sie mehr als 2 Symbole stapeln:

Siehe den folgenden Link: https://fontawesome.com/how-to-use/on-the-web/styling/layering

Answer 3

Diese Funktion wird derzeit von bereitgestellt von fontaWesome.

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