垂直对齐字体真棒图标到底部答案

【问题标题】：Vertically align font awesome icons to bottom垂直对齐字体真棒图标到底部
【发布时间】：2017-05-01 18:11:02
【问题描述】：

我想我一定错过了一些简单的东西。是否可以将字形内容/字形本身与父元素的底部对齐？

鉴于this example，我怎样才能将所有图标保持在底部，无论图标如何？

这里有一张图片可以更好地说明我想要什么：

显然我可以为每个图标设置不同的line-height 属性，但我想知道是否有更通用的方法来解决这个问题。或者，如果 font-awesome 附带了一些类似于 fixed width approach 的辅助类（通过使用 fa-fw）。

【问题讨论】：

【解决方案1】：

我在 Font Awesome 中进行了一些挖掘，但似乎没有任何解决固定字形高度的方法。我要做的是添加以下 CSS 并手动定位每个字形。

编码愉快！

.icon-elem {
  position: relative;
}
.fa-user {
  top: 7px;
}
.fa-cloud-upload {
  top: 15px;
}

【讨论】：

谢谢，是的，好像没有别的办法了。也许他们可以为这种情况添加一个辅助类。我假设它会为每个字形计算em line-height
em line-height 的问题在于，glph 本身在顶部和底部有额外的填充，嵌入在行高中，因此您仍然需要手动逼近 line-height。如果您找到解决方案，请告诉我。

【解决方案2】：

只是不得不弄清楚这一点，所以添加了一个很晚的答案。在Fontawesome 5 中，图标高度更标准，但如果您想在框内移动图标，可以使用power-transforms。

示例： <i class="fas fa-upload" data-fa-transform="down-4"></i> 会将上传图标移到更靠近底部的位置。

【讨论】：