对齐图标水平堆叠圆，字体真棒

基金会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

对齐图标水平堆叠圆，字体真棒

回答

相关问题