html - 使用带有嵌套文本的 HTML <i> 标记来呈现图标

Question

在大多数具有图标字体的 CSS 框架中，都有如下实现示例:

<i class="material-icons">
   share
</i>

来源:Material Icons

我也知道这也行得通:

<i class="material-icons share"></i>

后一个例子在逻辑上对我来说很有意义，因为 CSS 框架的样式表具有应用 :before 伪元素的类名及其 content 属性设置为 unicode 值(如以及其他样板文件)。

我的问题是浏览器是否渲染了第一个示例？

在我看来，material-icons 类和作为文本嵌套在其下的图标名称之间存在某种关系，我想知道这种关系是在哪里以及如何建立的。

Answer 1

由于您的示例取自 Material Icons，因此我将在此范围内回答您的问题。

浏览器是否呈现第一个示例？

让我们从头开始:

<i class="material-icons">
   share
</i>

在这里，他们使用 <i> 元素用于 icons(not 一个好主意)。还设置了 CSS 类，material-icons . Material Icons 在此 CSS link 中设计:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

让我们看看这个 material-icon class 是如何实现的设计:

.material-icons {
  font-family: 'Material Icons'; /* [...] */
}

“Material Icons”是一种自定义字体，在同一资源中有描述:

@font-face {
  font-family: 'Material Icons';
  /* [...] */
  src: url(https://fonts.gstatic.com/s/materialicons/v46/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

所以你最终得到了文本 "share"以自定义字体显示，这是此功能的关键。 这不是 unicode 字符也不是“真正的”图标(SVG 或位图)，而是以特定字体显示的整个文本以将其呈现为图标.

---

例如，在下面的代码片段中，尝试选择共享图标的“一部分”，您会发现这实际上是“共享”一词，每个字符都绘制一个字符。将其复制并粘贴到其他地方以查看它。例如，左边的点代表 h .

@font-face {
  font-family: 'Material Icons';
  src: url(https://fonts.gstatic.com/s/materialicons/v46/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-size:24px;
}

<i class="material-icons">
   share
</i>