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> 是如何工作的？

这是查看Materialize Icons的网址

Answer 1

这是一种叫做连字的东西。查看 this 页面，该页面解释了如何在 CSS 中启用它们。

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