如何在“真棒字体"图标上放置文本? [英] How to position text over Font Awesome icon?

问题描述

是否有一种方法可以垂直对齐堆积在真棒字体"图标顶部的文本?我想将#1向上移动，使其在奖杯图标的杯中居中.我尝试在封装#1的跨度中添加下边距和下边距，但是没有一个人能做到这一点.有没有一种简单的方法可以完成我要完成的任务，或者我需要走另一条路线?

Is there a way to vertically align text stacked on top of a Font Awesome icon? I'd like to move the #1 up in this stack so that it is centered in the cup of the trophy icon. I tried adding bottom-margin and bottom-padding in the span that encapsulates the #1, but neither one did the trick. Is there an easy way to do what I'm trying to accomplish, or do I need to go another route?

<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/

推荐答案

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

Add display:block; margin-top:-20px; to the #1 <span> tag like so:

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

这篇关于如何在“真棒字体"图标上放置文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！