如何水平对齐 Font Awesome 5 中的分层图标？

Question

我正在尝试使用图层在 fontawesome 中将一个图标放在另一个图标之上，我希望这些图标水平对齐。如果我使用默认图标大小，它会起作用，但是当我增加图标大小 (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>

如何水平对齐 Font Awesome 5 中的分层图标？

How to horizontally align layered icons in Font Awesome 5?

html

css

font-awesome

font-awesome-5