FontAwesome及Material Icon等图标与中文文字的对齐问题

Question

http://nyaii.com/t/

在这个页面上有第一行第二行的公文包图标是FontAwesome，第四行和第三行是Google Material Design的Material Icon,可以看到或多或少都有与文字的对齐问题。其中Material Icon最为严重，与英文都不能对齐。代码如下：

<h2>字体</h2>
<div style="font-size:64px"><span><i class="fa fa-briefcase fa-fw"></i>主要业务</span></div>
<div style="font-size:64px"><span><i class="fa fa-briefcase fa-fw"></i>Some English Letters</span></div>
<div style="font-size:64px"><span><i class="material-icons" style="font-size:64px">menu</i>主要业务</span></div>


<div style="font-size:64px"><span><i class="material-icons" style="font-size:64px">menu</i>Some English Letter</span></div>

请问这是什么原因造成的呢？

Answer 1

Solution:
i.fa i.material-icons{vertical-align:bottom}

图标缺省对齐的baseline是英文四条线中的第三条，而中文都是对齐到第四条线的