google-material-icons - 如何使用谷歌素材图标作为类而不是标签

Answer 1

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

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

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

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

Answer 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。

Answer 3

您可以使用IcoMoon（一款出色的免费字体生成工具）。设置类，前缀/后缀等进行调整，然后您可以轻松添加图标<i class="m-home"></i>