如何在 Font Awesome 图标上放置文本？答案

【问题标题】：How to position text over Font Awesome icon?如何在 Font Awesome 图标上放置文本？
【发布时间】：2014-05-03 21:29:47
【问题描述】：

有没有办法垂直对齐堆叠在 Font Awesome 图标顶部的文本？我想将 #1 在此堆栈中向上移动，使其位于奖杯图标的杯子中心。我尝试在封装 #1 的跨度中添加底部边距和底部填充，但都没有成功。有没有一种简单的方法可以完成我想要完成的事情，还是我需要走另一条路？

<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;">
      #1
    </span>
  </span>
</span>

http://jsfiddle.net/wc2jP/

【问题讨论】：

标签： css font-awesome

【解决方案1】：

将display:block; margin-top:-20px; 添加到#1 <span> 标签，如下所示：

http://jsfiddle.net/wc2jP/1/

【讨论】：

你太棒了。这让我快疯了。非常感谢！ :)

【解决方案2】：

在您提出这个问题几个月后，Font Awesome 的团队在博客中使用了他们的日历、评论和文件图标的示例：Stacking Text and Icons

【讨论】：

【解决方案3】：

您也可以将line-height 属性与display:inline-block 一起使用。

span{
vertical-align:top; 
display:inline-block; 
line-height:1.6em;
}

这是工作 Demo。

【讨论】：