如何使用谷歌素材图标作为类而不是 标签答案

【问题标题】：how to use google material icons as class instead of tag如何使用谷歌素材图标作为类而不是 标签
【发布时间】：2016-09-13 21:24:59
【问题描述】：

根据Google Material website 中的指南，我们必须在_i _ 标签中使用材质图标。

问题是如何将图标添加为令人敬畏的字体。类似：

Class="material-icons face"

而不是

 face 

【问题讨论】：

我知道这是 4 年前的事了，我的回答有点离题（因为它不使用 class 属性），但以防万一它对将来的任何人有所帮助，就这样。如果您只是将 替换为，它就可以工作。例如， face

【解决方案1】：

是的，您可以使用 after 伪元素将材质图标添加为类。查看fiddle

 <span class="material-icons face"></span>

.face {
    position:relative;
    display:inline-block;
}

.face:after {
    content: "face";
}

【讨论】：

【解决方案2】：

有一种比接受的答案更简单的方法。我从插件 css-toolip 中获得了灵感，它利用了 attr() css 功能（令人惊讶的是浏览器采用率很高）。

虽然对于内容属性的所有浏览器都有效地支持 attr()... https://caniuse.com/#search=css%20attr

<span class="material-icons" data-icon="face"></span>

.material-icons:after {
    content: attr(data-icon);
}

这意味着您不必为要使用的每个图标添加 css。

【讨论】：

【解决方案3】：

您可以使用IcoMoon（一款出色的免费字体生成工具）。设置类，前缀/后缀等进行调整，然后您可以通过轻松添加图标

【讨论】：