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

Question

我有一个关于Codepen code source的示例，并且图标和文本都可以垂直对齐。有没有JS代码的好方法吗？我喜欢保持li元素和其他样式的行高。

Answer 1

不能将padding-top放在fa图标上以使其与文本对齐吗？像

.fa-amazon {
  padding-top: 5px;
}

Answer 2

在svg元素的中间添加vertical-align：

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

删除位置：从现有的.fa-li css类中完全删除，因为这会破坏布局并阻止垂直对齐：中间位置正常工作

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