Question

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

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

来源：Material Icons

我也知道这也会起作用：

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

从逻辑上来说，后面的示例对我来说很有意义，因为CSS框架的样式表具有应用:before伪元素并将其content属性设置为unicode值（以及其他样板）的类名。 / p>

我的问题是高层次的浏览器是否呈现第一个示例？

在我看来，类material-icons与作为文本嵌套在其下的图标名称之间存在某种关系，我想知道它的建立位置和方式。

Answer 1

由于您的示例取自材料图标，因此我将在此范围内回答您的问题。

从高层次上讲，浏览器是否呈现第一个示例？

让我们从头开始：

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

在这里，他们将 <i> 元素用于 i 缺点（not是个好主意）。还设置了CSS类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'; /* [...] */
}

“材料图标”是一种自定义字体，在同一资源中进行了描述：

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

因此，您最终获得了以自定义字体显示的文本"share"，这是此功能的关键。 这不是Unicode字符，也不是“真实”图标（SVG或位图），而是以特定字体显示的整个文本，以将其呈现为图标。

例如，在下面的代码段中，尝试选择共享图标的“一部分”，您会发现这实际上是单词“ shared”，每个字符都绘制一个字符。复制并粘贴到其他位置以查看它。例如，左点代表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>

使用HTML <i>标签和嵌套文本来呈现图标

1 个答案: