如何在CSS伪元素(::before)中使用Material.io轮廓图标？

问题的核心在于你用的是默认的填充版Material Icons字体，而轮廓样式的图标属于独立的字体变体。下面是具体的解决步骤：

1. 切换到轮廓版字体家族
   Material Icons有多个字体分支（填充、轮廓、圆形、锐利等），轮廓样式对应的专属字体是Material Icons Outlined，你需要把CSS里的font-family替换成这个值。

2. 使用轮廓版图标的正确Unicode
   填充版和轮廓版的同一款图标，对应的Unicode编码是不一样的。你之前用的\E8F4是填充版visibility的编码，轮廓版visibility的正确Unicode是\F06E3。

修改后的完整代码如下：

.view-site:before{ 
  content: "\F06E3"; 
  font-family: 'Material Icons Outlined'; 
  /* 可选：按需添加图标大小、颜色等样式 */
  font-size: 24px;
  color: #666;
}

额外注意事项 #

• 如果你还没加载轮廓版的字体资源，得先确保它能被正确访问。可以选择本地部署字体文件，或者使用官方提供的字体资源（避免外链的话，优先本地部署）。
• 之后要使用其他轮廓样式图标时，都要指定Material Icons Outlined作为字体家族，同时查询该变体下对应的Unicode编码（在Material Icons的图标详情页就能找到轮廓版的编码）。

内容的提问来源于stack exchange，提问作者Artur Haddad