글꼴 아이콘의 렌더링 된 크기 차이

Question

내 아이콘을 텍스트의 가운데에 세로로 배치하고 싶지만 크기가 달라서 어렵게 만듭니다.

왜 이런 아이콘 크기 차이로 인해 아이콘 글꼴이 렌더링됩니까?

부트 스트랩에서 사용 된 아이콘 글꼴 방법을 사용하고 있습니다 (내용을 넣으려면 psuedo 요소를 사용함).

이것은 <i class='icon'></i> 크기입니다.

이

은 <i class='icon'></i>이다 : 크기 전에. 왜 다른가?

HTML :

<h2> 
    <i class="ss-picture"></i> 
    Creatives 
</h2> 

CSS :

[class^="ss-"], [class*=" ss-"] { 
    vertical-align: text-top; 
    padding-right: 5px; 
} 

.ss-picture:before, .ss-picture.right:after { 
    content: ''; 
} 

[class^="ss-"], [class*=" ss-"] { 
    font-family: "SSStandard"; 
    font-style: normal; 
    font-weight: normal; 
    text-decoration: none; 
    text-rendering: optimizeLegibility; 
    white-space: nowrap; 
    -moz-font-feature-settings: "liga=1"; 
    -moz-font-feature-settings: "liga"; 
    -ms-font-feature-settings: "liga" 1; 
    -o-font-feature-settings: "liga"; 
    font-feature-settings: "liga"; 
    -webkit-font-smoothing: antialiased; 
} 

Answer 1

확인하시기 바랍니다 행 높이 및 글꼴 크기.

나는 두 페이지 속성이 모두 다릅니다.