关于 Material Icons 对齐问题？

Question

google 的 Material Icons 无法与横向文字对齐。

下面是与 Awesome Icons 的对比。（同样的 css ）

下面是 Material Icons 和 Awesome Icons 的计算结果

vertical-align 并不能解决问题。

有人遇到这种情况吗？请问是如何解决的？

Answer 1

查询了 stackoverflow 和 material design icons 的 Issues ，发现这个问题普遍存在，google的团队貌似已经准备要改进。

这个问题没有一个统一的解决方案，需要根据自己的 css 制定不同的方案。经过测试，我发现一个应该可以涵盖大部分使用 reset css 或者ui框架的比较好解决方案：

.material-icons {
...
display: inline-block;
font-size: inherit;
line-height: inherit;
vertical-align: middle;
transform: translateY(-.1em);
...
}

其他的解决方案，stackoverflow 和 Issues 也给出了无数种，主要是根据自己的 css 制定合适的方案。

一些参考：
https://stackoverflow.com/que...
https://stackoverflow.com/que...
https://stackoverflow.com/que...

https://github.com/google/mat...
https://github.com/google/mat...

Answer 2

.material-icons, .icon-text, .icon-text-caps, .icon-text-tweaked {

  vertical-align: middle;
}
.icon-text-caps, .icon-text-tweaked {
  text-transform: uppercase;
}
.icon-text-tweaked {
  position:relative;
  top:1px;
}


http://jsbin.com/kujabehiso/edit?html,output