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

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