css - 中间对齐差异：Material-icons vs Font-Awesome

Question

为什么即使 Font-Awesome 的 css 完全相同，Material-icons 也不能设置垂直居中与文本对齐？（使用 Bootstrap3）

他们俩都有&:before { content: '{icontext}' }

<a class="btn btn-default">  
  <i class="material-icons"></i>  
  <i class="fa fa-bookmark"></i>
  123
</a>

---

.material-icons {
    display: inline-block;
    font: normal normal normal 14px/1 'Material Icons';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

---

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

编辑：

附上jsfiddle https://jsfiddle.net/laires/guxwxvzL/

Answer 1

这是一个具有不同行高和填充的示例。

我vertical-align: middle;在 .material-icons 中添加了类。

编码：

https://jsfiddle.net/rafalito1989/yutqc2xL/

希望你有帮助

Answer 2

尝试添加vertical-align: middle.material-icons { ... }