使用Font Awesome将图标水平对齐到堆叠的圆圈

Question

我的网站模板使用：

• 基础6：Zurb模板
• Font Awesome 4.7

下面给我一个倒置圆圈的信封图标，基本上工作正常。

  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-2x fa-inverse"></i>
    <i class="fa fa-envelope fa-stack-1x"></i>
  </span>

但是，信封图标未在圆圈中居中（垂直对齐）。使用浏览器的开发工具，似乎信封位于周围<i>元素的中心。

如何将图标置于圆圈中心？

Answer 1

您可以否决display的{​​{1}}属性。 fa-stack允许您将flexbox中的两个图标水平和垂直居中。

＆＃13;

＆＃13;

span

＆＃13;

body {
  background: grey;
}

.fa-stack {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

＆＃13;

＆＃13;

＆＃13;