/ icon

解决 Material Icons 谷歌图标无法对齐文本的问题

一直觉得 google 的 Material Icons 图标非常精美,今天终于要把这个图标字体应用到新页面中,但是发现了一些问题。就是图标很难和文本对齐。这里讲一下遇到的坑和解决方案。

遇到的问题

Material Icons 和 Awesome Icons 的呈现对比(同样的 CSS)。

Material Icons 和 Awesome Icons 的计算结果对比。
一般情况下,图标字体的对齐受字体大小和行高的影响,尽管你为图标字体设置了合理的 CSS ,但 Material Icons 依然无法完美对齐(即使使用 vertical-align: middle;也还是有很多偏差,和中文、英文对齐基线无关)。

解决方案

经过搜索 stackoverflow 和 Material Icons 的 Issues ,发现该问题普遍存在,google 的工程师表明这是一个字体问题,并希望可以在之后改进(当前测试有问题的版本 V3.0.1 )。

目前要解决 Material Icons 的对齐问题,stackoverflow 和 Material Icons 的 Issues 上面也给出了无数种,但是还需要根据自己的全局 CSS 制定不同的方案。经过测试,我发现一个应该可以涵盖大部分使用 reset css 或者 ui 框架的比较好解决方案:

<code class="language-css">.material-icons {
    ...
    display: inline-block;
    font-size: inherit;
    line-height: inherit;
    vertical-align: middle;
    transform: translateY(-.1em);
    ...
}

一些参考:
https://stackoverflow.com/questions/43360526/align-material-icon-vertically
https://stackoverflow.com/questions/35844390/material-design-icon-vertical-align-chrome
https://stackoverflow.com/questions/44866624/building-a-vertical-menu-using-md-menu-and-material-icons
https://github.com/google/material-design-icons/issues/206
https://github.com/google/material-design-icons/issues/402

解决 Material Icons 谷歌图标无法对齐文本的问题
Share this