如何使用谷歌材料图标作为类而不是<i>标签

Question

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

问题是如何将图标添加为字体 - 真棒。类似的东西：

Class="material-icons face"

而不是

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

Answer 1

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

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