使用 Font Awesome 将图标水平对齐到堆叠的圆圈

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>

使用 Font Awesome 将图标水平对齐到堆叠的圆圈

Align icon horizontally to stacked circle with Font Awesome

css

zurb-foundation

font-awesome