根据Google Material网站的指南,我们必须在标签_i_中使用material图标。问题是如何像font-awesome一样添加这些图标,类似于:
Class="material-icons face"
而不是
<i class="material-icons"> face </i>
Class="material-icons face"
而不是
<i class="material-icons"> face </i>
是的,您可以使用after伪元素将材料图标添加为类。查看代码片段。
<span class="material-icons face"></span>
.face {
position:relative;
display:inline-block;
}
.face:after {
content: "face";
}
有一个比接受答案更简单的方法。我从插件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。
这意味着您无需针对要使用的每个图标添加CSS。
如果有人不想使用数据选择器,也可以使用Sass创建选择器。
$icons: "content_paste_search", "format-size", "search";
@each $icon in $icons {
.material-icons-#{$icon}:after {
content: $icon;
}
}
<span class="material-icons material-icons-search"></span>
class
属性),但以防将来有人需要,我还是说一下。如果你只是用<span>
替换<i>
,它就可以工作了。例如,<span class="material-icons"> face </span>
。 - padawanTony