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

Question

为什么Material-icons无法设置与文本垂直对齐，即使完全相同的Font-Awesome 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-icons {...}

中添加$_renderers = $this->getParentBlock()->getChild('state_renderers');

Answer 2

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

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

代码：

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

希望你有所帮助