Question

有没有办法垂直对齐堆叠在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/

Answer 1

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

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

Answer 2

在您提出这个问题几个月后，Font Awesome的团队使用他们的日历，评论和文件图标通过示例在博客上发表了相关信息：Stacking Text and Icons

Answer 3

您可以使用line-height属性以及display:inline-block。

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

以下是工作 Demo 。

如何在Font Awesome图标上定位文本？

3 个答案: