레일 4 - 글꼴 굉장 CSS 문제

Question

나는 font-awesome icons을 사용하는 응용 프로그램을 가지고 있습니다.

제가 직면 한 문제는 일부 아이콘의 수직 정렬입니다. 더 구체적으로 말하자면, 올바르게 표시되지 않는 아이콘은 별, 톱니 및 자물쇠이며 this page 내에 있습니다.

요소가 올바르게 정렬 된 페이지는 found here이 될 수 있습니다.

그래서 원의 중심에서 글꼴 - 멋진 요소를 어떻게 정렬 할 수 있습니까? 당신의 CSS에서

Answer 1

는 .fa의 라인 높이가 귀하의 CSS가 축소 된되기 때문에이 사용자 정의 CSS 또는 글꼴 최고 CSS의 경우, 내가 말할 수없는 1

로 설정되고있다.

.fa { 
    display: inline-block; 
    font-family: FontAwesome; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

줄 높이를 제거한 경우 : 1; 아이콘이 중앙에 배치됩니다.

.fa { 
    display: inline-block; 
    font-family: FontAwesome; 
    font-style: normal; 
    font-weight: normal; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

기본 라인의 높이를 제거하지 않으려면 항상 .fa - 배 클래스에 라인 높이를 추가 할 수 있습니다 : 나는 방법을 설명하는 단어가 없습니다

.fa-3x { 
    font-size: 3em; 
    line-height: 1.9em; 
}