在 fontawesome 图标上的样式字体

【问题标题】：Style font over fontawesome icon在 fontawesome 图标上的样式字体
【发布时间】：2015-10-24 23:56:09
【问题描述】：

<span class="fa-stack fa-3x">
<i class="fa fa-trophy fa-stack-2x"></i>
  <span class="fa fa-stack-1x" style="color:red;">
      <span style="font-size:35px; margin-top:-20px; display:block;">
          #1
      </span>
</span>

我希望奖杯内的“1”看起来像这样......❶......它是一个黑色圆圈内的“1”，类似于编号的台球，我希望能够对其进行 CSS 样式设置，颜色，大小，边框等。这有可能实现吗？这个❶是我从 Word 中复制的符号。

【问题讨论】：

标签： html css fonts font-awesome webfonts

【解决方案1】：

HTML：

<span class="fa-stack fa-3x">
    <i class="fa fa-trophy fa-stack-2x"></i>
      <span class="fa fa-stack-1x" style="color:red;">
          <span>
              #1
          </span>
    </span>
</span>

CSS：

.fa-trophy ~ .fa{font-size:35px;margin-top:13px;display:block;position:relative}
.fa-trophy ~ .fa span{background:#fff;color:red;border-radius:50%;width:24px;height:24px;text-align:center;font-size:20px;line-height:20px;display:block;padding:4px;position:absolute;top:16%;left:0;right:0;margin:auto}

让我知道这是否符合您的想法。

【讨论】：

我的想法是拥有 Font Awesome TROPHY，并且在该奖杯内有我指定的“1”。
我可以完成台球，但我无法让它在 TROPHY 中水平和垂直居中。