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.