浏览器如何解析前端代码中未明确引用的图标库？

Question

每当我看到一些JS / UI魔术时，我都被迫研究它直到我理解它。

我最近遇到了一个很棒的developer's personal website并注意到她正在使用Mdi icons。如果您查看源代码，您会看到它们的几种不同用法：

• mdi-content-send
• mdi-content-archive
• mdi-navigation-chevron-left
• mdi-navigation-chevron-right
• 等

我无法弄清楚：访问此Mdi图标库的位置是什么？它从未被指定为HTML，CSS或JS中的引用/导入：那么我的浏览器如何解决它？

Answer 1

它在CSS文件中引用。检查http://www.shannabarnard.com/css/materialize.css。有一种名为“Material-Design-Icons”的字体。使用伪归因为:before的CSS类映射到此字体。

.mdi-content-archive:before {
    content: "\e6ff";
}

代码\e6ff是一个字母，在这种情况下是一个Icon而不是一个字母。