Javascript HTML和CSS中的图标作为代码（例如：&xe348；）

我参与了一个项目，其中显示的图标如下：

<span class="streamline" aria-hidden="true" data-icon="&#xe006;">Some label</span>

图标是如何工作的？我需要添加一个新图标，但我根本不确定显示图标的系统是如何工作的——这是CSS的一部分

谢谢

数据图标正在引用图标字体流线中的字符。在样式表顶部查找以下内容：

@font-face {
    font-family: streamline;
    src: url( /* url to .eot file */ ) format("embedded-opentype"),
         url( /* url to .woff file */ ) format("woff"),
         url( /* url to .tff file */ ) format("truetype"),
         url( /* url to .svg file */ ) format("svg");
    font-style: normal;
    font-weight:normal;
}

CSS定义了字体系列流线型。字体文件的URL将显示它们的位置

如果要查看该字体中可用的图标，可以下载.tff文件并尝试以下操作：

要使用当前字体中存在的其他图标，只需将数据图标属性更改为相应的html实体&*****；。要获取此代码，请从要使用的字体中复制字符，并将其粘贴到此页面上的“解码”框中：

---

要使用streamline中不存在的图标，您需要将字体文件替换为包含所需字符的新文件。

这些图标是基于字体的精灵，因此要添加新图标，您需要更改数据图标代码，所有图标也将位于一个文件中。您需要找到其他图标的代码。看看这个。

@font-face {
    font-family: streamline;
    src: url( /* url to .eot file */ ) format("embedded-opentype"),
         url( /* url to .woff file */ ) format("woff"),
         url( /* url to .tff file */ ) format("truetype"),
         url( /* url to .svg file */ ) format("svg");
    font-style: normal;
    font-weight:normal;
}