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

Question

根据Google Material网站上的指南,我们必须使用_ i _ tag中的材质图标.

问题是如何将图标添加为font-awesome.就像是 :

Class="material-icons face"

代替

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

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。