中間對齊的區別：Material-icons vs Font-Awesome

爲什麼即使Font-Awesome的CSS完全相同，Material-icons也不能設置垂直對齊文本的中間？（與Bootstrap3）中間對齊的區別：Material-icons vs Font-Awesome

他們都具有&:before { content: '{icontext}' }

image: Left: Material-icons/Right: Font-Awesome

<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/

來源

2017-04-06 Seungjin Kang

我不知道確切的回答你的問題，但如果問題是垂直對齊由Flexbox的 –

郵政工作輕鬆完成代碼片段，與你使用的鏈接庫版本 – LGSon

好的，我附加jsfiddle：https://jsfiddle.net/laires/guxwxvzL/ –