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

【问题标题】：Align icon horizontally to stacked circle with Font Awesome使用 Font Awesome 将图标水平对齐到堆叠的圆圈
【发布时间】：2018-04-01 11:58:34
【问题描述】：

我的网站模板使用：

基础 6：Zurb 模板
字体真棒 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> 元素的中心。

如何让图标在圆圈中居中？

【问题讨论】：

标签： css zurb-foundation font-awesome

【解决方案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>

【讨论】：