图标在超文本标记语言和CSS中作为代码(例如：)

Question

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

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

该项目在Ruby on Rails中，所以我以为图标会保存在/assets文件夹中，但它们不在那里。

在CSS文件中，我只看到以下内容：

.streamline[data-icon]:after, .filtericons[data-icon]:before, .slicons {
  font-family: 'streamline';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  margin: 0 5% 0 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

这些图标是如何工作的？我需要添加一个新的图标，但我根本不确定显示图标的系统是如何工作的-这是CSS的事情吗？

谢谢

Answer 1

data-icon正在引用图标字体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;
}

CSS定义了font-family streamline。字体文件的URL将显示它们所在的位置。

如果您想查看该字体中有哪些图标可用，可以下载.tff文件并尝试以下操作：

MyFonts - How do I see all the characters in a font?

要使用当前字体中存在的不同图标，只需将data-icon属性更改为相应的html实体(&#*****;)即可。要获得此代码，请从您的字体复制要使用的字符，并将其粘贴到此页面上的'Decoded‘框中：

HTML entity encoder/decoder

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