如何在Bootstrap媒体对象中使用fontawesome堆叠的图标

Question

我正在尝试在引导媒体对象中使用fontawesome 5堆栈：

<div class="media">
  <span class="fa-stack fa-2x">
  <i class="fas fa-circle fa-stack-2x fa-fw"></i>
  <i class="fas fa-circle fa-stack-1x fa-inverse fa-fw"></i>
  </span>
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

但是堆叠的图标未垂直对齐，如您所见，内部圆圈在下面偏移：

我已经搜索并看到了很多通过margin:-1px等来调整CSS的答案，但是我想知道实际上是在抛出什么偏移量？必须有一种结构化的方法来在DOM中解决此问题，而不是破解fontawesome CSS？

Answer 1

不确定是否有帮助，但是：功率转换有帮助吗？ https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms也许是定位部分。 （data-fa-transform =“ up-1”）

我还尝试了一些方法：在Fontawesome网站的页面上使用您的代码：https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

图标在那里完美对齐：