如何创建多个 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

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

.trophy {
  position: relative;
  /* Parent needs to be taken out of normal document flow to center the number*/
}

.trophy__icon {
  color: #FF8000;
}


/* Class to center the number */

.trophy__number {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: -6%;
  text-align: center;
  font-size: .5em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa-stack fa-lg trophy">
  <i class="fa fa-circle fa-stack-2x trophy__background"></i>
  <i class="fa fa-trophy fa-stack-1x trophy__icon"></i>
  <div class="trophy__number">1</div>
</span>

Answer 2

我相信你想要这样的东西？

<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 通过将元素放置在递增的层上来工作，因此跨度中的第一件事将在底部。

编辑：移出奖杯并为其添加样式。虽然你通常不应该像这样设计样式

如何创建多个 fa-icon

How create a multiple fa-icon

html

css

favicon