글꼴 위에 텍스트를 배치하는 방법 끔찍한 아이콘?

Question

글꼴 굉장 아이콘 위에 쌓인 텍스트를 세로로 정렬하는 방법이 있습니까? # 1을이 스택에서 위로 이동하여 트로피 아이콘의 컵 중앙에 위치시키고 싶습니다. 나는 bottom-margin과 bottom-padding을 # 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

1 <span> 태그 그래서 같은 #에 display:block; margin-top:-20px;을 추가

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

Answer 2

당신이 display:inline-block으로뿐만 아니라 line-height 속성을 사용할 수 있습니다. 여기

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

는 작업 Demo이다.

Answer 3

이 질문, 일정, 메모, 파일 아이콘을 사용하여 예제와 함께 이것에 대해 블로그에 멋진 글꼴에서 팀 요청 후 몇 달 : Stacking Text and Icons