javascript - HTML 和 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 实体(&#*** **;)。要获取此代码，请从您要使用的字体中复制字符，并将其粘贴到此页面上的“已解码”框中:

HTML entity encoder/decoder

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