关于 Material Icons 对齐问题?

Eisten
  • 454

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

下面是与 Awesome Icons 的对比。(同样的 css )

图片描述

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

图片描述

vertical-align 并不能解决问题。

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

回复
阅读 3.1k
2 个回答
✓ 已被采纳

查询了 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...

.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
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏