Html 如何正确对齐堆叠的字体图标

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

这是我的三张照片的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>

---

将

上的
显示：flex
和
上的.fa刀具
和
上的.fa反转
设置为
上的.fa圆薄

和背景色
至
span


正文{
背景：红色
}
跨度{
背景：黑色；
边界半径：100%
}
.fa餐具{
显示器：flex
}

哦，太棒了。我想澄清一下，因为我正在尝试这一点。当你说把flex放在.fa上，与.fa相反，圈薄，这意味着什么？我只是想澄清一下。我说：设置
显示：flex
（属性）在
.fa刀叉
和（添加/设置类）
.fa反转
（到有类的图标）
。fa圆薄
.icon-stack-1x {
  line-height: inherit;
}
.icon-stack-2x {
  font-size: 1.5em;
}