Html 字体5 svg图标和文本在顶部垂直对齐

我有一个关于codepen的例子，我喜欢垂直对齐的图标和文本。有没有一种不用JS代码就能做到这一点的好方法？我喜欢将线条高度与li元素和其他样式保持一致。

您不能将填充顶部放在fa图标上，使其与文本对齐吗？差不多

亚马逊酒店{ 垫面：5px；

---

} 将垂直对齐：中间添加到svg元素：

.svg-inline--fa.fa-li {
    vertical-align: middle;
}

从现有的.fa li css类中删除position:abosolute，因为这会破坏布局并阻止垂直对齐：middle正常工作

.fa-li {
    /*left: -2em; */
    position: relative;
    text-align: center;
    width: 2em;
    line-height: 1.6;
}

---

您想保留当前的HTML结构吗？如果需要，可以更改HTML结构，但我不想在li元素内部触碰该结构。垂直对齐是什么意思？如果你的意思是文本应该在中间，如果图标，那么，它们已经对齐。问题是图标不是对称的，这造成了一种他们没有对齐的错觉。我喜欢图标和文本在一行中，在顶部，是的，这是可以的，但5px是固定的，我需要一些解决方案，这个数字不会是固定的，我喜欢这个数字取决于行高和字体大小，要计算动态线高度，图标和垂直对齐不起作用：中间；不要更改图标行为。fa li el中的另一种样式在默认情况下已经存在