如何在 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>