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.