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

Question

我想我必须在这里遗漏一些简单的东西。是否可以将字形内容/字形本身与父元素的底部对齐？

鉴于this example，无论图标如何，如何将所有图标保留在底部？

这是一张更好地说明我想要的图片：

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

Answer 1

我在Font Awesome中进行了一些挖掘，看起来没有任何解决方案可以解决固定的字形高度问题。我要做的是添加以下CSS并手动定位每个字形。

快乐的编码！

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

Answer 2

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

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