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中水平对齐分层图标？

1 个答案: