Materialise 图标如何工作？

Question

Materilize Icon有两种使用方式：

1. <i class="mdi-action-settings"></i>
2. <i class="material-icons">settings</i>

<i class="mdi-action-settings"></i> 我了解第一种方法的工作原理。这是因为 css 定义如下：

.mdi-action-settings:before {
    content: "\e672";
}

现在我的问题是第二种方法 <i class="material-icons">settings</i> 是如何工作的？

这里是URL看Materialize Icons

Answer 1

这就是所谓的连字。查看 this 页面，了解如何在 CSS.

中启用它们

长话短说，如果您启用它，您会告诉浏览器寻找应该以另一种方式呈现的字母组合。显示了一个示例 here。一些特殊字体（如在 materializecss 中或您在 icomoon.io 中创建的字体）仅将此功能与文字一起使用来呈现图标而不是组合字母。 如果浏览器无法处理连字，那么它会优雅地回退到字面词，而不是空的 space。