对齐图标水平堆叠圆,字体真棒
问题描述:
我的网站模板使用:对齐图标水平堆叠圆,字体真棒
- 基金会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>
元素中。
如何将图标居中在圆圈中?
答
您可以否决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>