css - 使用 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

您可以否决 fa-stack 的 display 属性。 flexbox 将允许您在 span 中水平和垂直居中放置两个图标。

body {
  background: grey;
}

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<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>