如何使用 google material 图标作为 class 而不是 标签

Question

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

问题是如何将图标添加为 font-awesome。类似于：

Class="material-icons face"

而不是

 face 

Answer 1

是的，您可以使用 fiddle

之后的伪 elements.check 将 material 图标添加为类

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

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

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

Answer 2

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

While attr() is supported for effectively all browsers for the content property... 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（一款出色的免费字体生成工具）。设置class、prefix/suffix等进行调整，然后您可以通过

轻松添加图标

Answer 4

如果有人不想使用数据选择器，也可以使用 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>

如何使用 google material 图标作为 class 而不是 <i> 标签