如何在 Font Awesome 5 中水平對齊分層圖標？

Question

我正在嘗試使用圖層將一個圖標放在另一個圖標之上，我希望這些圖標水平對齊。 如果我使用默認圖標大小，它會起作用，但是當我增加圖標大小（fa-4x）時，圖標不會水平對齊。 請參閱https://jsfiddle.net/u7qc53ge/1/

 body { font-size: 16px; padding: 4rem; }

 <script type="text/javascript" src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script> <!-- this works --> <span class="fa-layers fa-fw"> <i class="fas fa-ban"></i> <i class="fab fa-facebook-f"></i> </span> <!-- this does not --> <span class="fa-layers fa-fw"> <i class="fas fa-ban fa-4x"></i> <i class="fab fa-facebook-f fa-4x"></i> </span>

Answer 1

您需要在父元素上使用fa-4x ：

 body { font-size: 16px; padding: 4rem; }

 <script type="text/javascript" src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script> <span class="fa-layers fa-fw"> <i class="fas fa-ban"></i> <i class="fab fa-facebook-f"></i> </span> <span class="fa-layers fa-fw fa-4x"> <i class="fas fa-ban "></i> <i class="fab fa-facebook-f "></i> </span>