如何正确对齐堆叠的 Font-Awesome 图标答案

【问题标题】：How to align stacked Font-Awesome icons correctly如何正确对齐堆叠的 Font-Awesome 图标
【发布时间】：2016-07-08 23:02:06
【问题描述】：

我在这方面已经太久了，还没有弄清楚如何将四个字体很棒的图标堆叠在一起。我已经到了三个，但我希望我的图标看起来像这样（对不起，糟糕的图像）

这是我的三个堆叠的 HTML。

<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x icon-background4"></i>
<i class="fa fa-circle-thin fa-stack-2x icon-background6"></i>
<i class="fa fa-cutlery fa-inverse fa-stack-1x"></i>
</span>

CSS

.icon-stack-1x {
  line-height: inherit;
}
.icon-stack-2x {
  font-size: 1.5em;
}

【问题讨论】：

标签： html css font-awesome

【解决方案1】：

将display:flex 设置为.fa-cutlery 并将.fa-inverse 设置为.fa-circle-thin

和background-color 到span

body {
  background: red
}
span {
  background: black;
  border-radius: 100%
}
.fa-cutlery {
  display: flex
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa-stack fa-4x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-circle-thin fa-stack-2x fa-inverse"></i>
  <i class="fa fa-cutlery fa-inverse fa-stack-1x"></i>
</span>

【讨论】：

太棒了。我想澄清一下，因为我正在尝试这个。当您说将 flex 放在 .fa-inverse 到 .fa-circle-thin 时，这到底意味着什么？只是想澄清一下。
我说：在.fa-cutlery上设置display:flex(property) 和（添加/设置类）.fa-inverse（到有类的图标）.fa-circle-thin