字体中堆叠图标的垂直对齐真棒答案

【问题标题】：vertical alignment of stacked icons in font awesome字体中堆叠图标的垂直对齐真棒
【发布时间】：2016-12-09 12:17:43
【问题描述】：

我无法在 Font awesome 4.7 和 bootstrap 3 中将堆叠图标 fa-stack 与普通图标 fa-fw 垂直对齐：

<span class="fa-stack">
  <i class="fa fa-fw fa-dot-circle-o fa-stack-1x text-danger"></i>
  <i class="fa fa-fw fa-circle-o fa-stack-1x text-info"></i>
</span> <strong>Company Ltd.</strong><br>
<i class="fa fa-fw fa-map-marker"></i> Street 7<br>

我做了一个 jfiddle 来说明：https://jsfiddle.net/tjykrv7q/ screenshot

【问题讨论】：

这对我来说在 OS X 上的 Firefox 中工作得很好 - 可能发布你所看到的图像，以及你的浏览器和操作系统。
谢谢 - 我添加了截图。 fa-stack 处的边距或其他东西太宽我在 ff 50.0.1 和 chrome 55.0.2883.75 m 中有这种效果

标签： twitter-bootstrap twitter-bootstrap-3 font-awesome fontawesome-4.4.0

【解决方案1】：

似乎“fa-stack”类为您的图标设置了 5px 的边距.. 您可以添加“marging：-5px”来解决这个问题：

<span class="fa-stack" style="margin: -5px;">

https://jsfiddle.net/tjykrv7q/2/

【讨论】：