浏览器如何解析没有在前端代码中具体引用的图标库？

Question

每次我看到一些JS/UI魔术，我都不得不研究它，直到我理解它。

最近我遇到了一个很棒的开发商个人网站，并注意到她正在使用Mdi图标。如果您查看源代码，您将看到它们的几个不同用法：

• 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。有一种叫做“材料-设计-图标”的字体。CSS类使用伪属性为:before映射到此字体。

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

代码\e6ff是一个字母，在本例中是图标而不是字母。