如何在 css 伪元素（::before）中使用 Material.io 概述的图标？答案

【问题标题】：How to use Material.io outlined icons in css pseudoelements (::before)?如何在 css 伪元素（::before）中使用 Material.io 概述的图标？
【发布时间】：2018-05-30 04:14:21
【问题描述】：

我正在尝试使用 ::before 将 Material.io 图标添加到按钮，但它只显示填充的图标。

没有关于如何设置轮廓图标的指南。

这是我的代码：

.view-site:before{
    content: "\E8F4";
    font-family: 'Material Icons';
}

如何显示轮廓图标？

【问题讨论】：

标签： css icons material-design material-ui

【解决方案1】：

Google 几周前声称新主题功能，但显然不知道如何使用轮廓、锐利、圆形和两种色调的图标。

我相信我们得到的唯一参考是这里： https://github.com/google/material-design-icons/issues/773

【讨论】：

【解决方案2】：

我相信您错过了 CSS 规则之前的点。这是固定的解决方案：

.view-site:before {
  content: "\E8F4";
  font-family: 'Material Icons';
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="view-site">
  
</i>

【讨论】：

我可以使用大纲图标作为 HTML 标签。我希望将其用作伪类 (::before)。
缺少的点是错字。我可以显示该图标，但没有概述。你的答案就是我正在做的，除了 view-site 是一个 div 而不是 i 元素。