정렬 아이콘 글꼴 최고

Question

내 웹 사이트 템플릿을 사용

• 재단 6 : Zurb 템플릿
• 글꼴 최고 4.7

다음은 나에게 쌓인 봉투 아이콘을 제공합니다 기본적으로 잘 작동하는 반전 된 원입니다.

<span class="fa-stack fa-lg"> 
    <i class="fa fa-circle fa-2x fa-inverse"></i> 
    <i class="fa fa-envelope fa-stack-1x"></i> 
    </span> 

그러나 봉투 아이콘은 원 안에 가운데 맞춤 (세로로 정렬)되지 않습니다. 브라우저의 개발 도구를 사용하면 봉투가 주위의 <i> 요소 가운데에있는 것처럼 보입니다.

어떻게 아이콘을 원 가운데에 배치 할 수 있습니까?

Answer 1

display 속성을 fa-stack으로 대체 할 수 있습니다. flexbox을 사용하면 두 아이콘을 가로 및 세로로 가운데에 맞출 수 있습니다. span.

body { 
 
    background: grey; 
 
} 
 

 
.fa-stack { 
 
    display: inline-flex !important; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<span class="fa-stack fa-lg"> 
 
    <i class="fa fa-circle fa-2x fa-inverse"></i> 
 
    <i class="fa fa-envelope fa-stack-1x"></i> 
 
    </span>