html - 如何创建多个 fa-icon

Question

我需要将多个 fa 图标放在一个必须是容器和数字的奖杯内。像这样:

https://img.clipartfest.com/fc3163ee61d664e212d4bb9764702efa_trophy-clipart-black-and-white-trophy-number-1-clipart_1920-1920.jpeg

我使用的代码是(但不起作用):

 <!-- create trophy -->
       <i class="fa fa-trophy fa-4x" aria-hidden="true" style="color:#FF8000;"><span class="fa-stack fa-lg">
      <i class="fa fa-circle fa-stack-2x"></i>
 <i class="fa fa-stack-1x">1</i>

    </span>
    </i>

这是行不通的，因为圆圈很大，它看起来靠近奖杯而不是在奖杯上方，而且数字 1 也出现在圆圈附近？谁能帮帮我？

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

字体大小可以通过很棒的字体类来改变。 font awesome stacking 通过将元素放置在递增的层上来工作，因此跨度中的第一件事将在底部。

编辑:移出奖杯并为其添加样式。虽然你通常不应该这样做样式