對齊圖標水平堆疊圓，字體真棒

基金會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>元素中。

如何將圖標居中在圓圈中？

來源

2017-10-20 Robert Strauch

您可以否決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>

來源

2017-10-20 10:19:48 sol

對齊圖標水平堆疊圓，字體真棒

回答

相關問題