Html 如何创建多个fa图标

我需要把多个足总图标放在一个奖杯上，这个奖杯必须是一个容器，里面有一个数字。大概是这样的：

我使用的代码是（但不是工作代码）：

1.

---

这是不起作用的，因为圆环非常大，它出现在奖杯附近，而不是奖杯上方。数字1出现在圆圈附近？有人能帮我吗？

您的标记错误，请尝试以下操作：

。奖杯{
位置：相对位置；
/*需要将父项从正常文档流中取出，以使编号居中*/
}
.奖杯图标{
颜色：#FF8000；
}
/*类将数字居中*/
.奖杯号码{
位置：绝对位置；
宽度：100%；
身高：100%；
左：0；
前-6%；
文本对齐：居中；
字体大小：.5em；
}

1.

我相信你想要这样的东西

<i class="fa fa-trophy fa-2x"style="color:#FF8000;vertical-align:middle"></i>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-stack-1x"style="color:#FF8000;">1</i>
</span>

1.

可以使用字体类更改大小。字体堆叠的工作原理是将元素放置在越来越多的层上，因此跨距中的第一件事是在底部

---

编辑：将奖杯移出并添加样式。虽然您通常不应该这样做

但我阅读了代码。我的意思是奖杯在外面，圆圈里的数字在里面。

<i class="fa fa-trophy fa-2x"style="color:#FF8000;vertical-align:middle"></i>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-stack-1x"style="color:#FF8000;">1</i>
</span>