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

Question

我已经在这方面花了太长时间，还没弄明白如何将四个字体真棒图标叠加在一起。我已经得到了三个，但我希望我的图标看起来像这样（抱歉这个图片很糟糕）

这是我三个堆叠的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;
}

Answer 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>