中间对齐差:材质-图标与字体-太棒了

Question

为什么材料图标不能设置垂直对中与文本，即使完全相同的css字体-太棒了？(与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图标{.}中添加vertical-align: middle

Answer 2

这里有一个不同的线条高度和衬垫的例子.

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

守则：

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

希望你能帮上忙