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>

可以使用字体真棒类更改大小。字体真棒堆叠的工作原理是将元素放在不断增加的图层上，因此跨度中的第一件事就是在底部。

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

如何创建多个fa-icon

2 个答案: