How to position text over Font Awesome icon?

Question

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/

Answer 1

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

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

Answer 2

A couple of months after you asked this question, the team at Font Awesome blogged about this with examples using their calendar, comment, and file icons: Stacking Text and Icons

Answer 3

you can use line-height property as well with display:inline-block.

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

Here is the Working Demo.