HTML和CSS中的图标作为代码(例如:)

Icons in HTML and CSS as a code (eg: )

本文关键字：例如 #xe348 代码 CSS 图标 HTML      更新时间：2023-09-26

我参与了一个项目，其中显示的图标是这样的:

<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的事情?

谢谢

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 -我如何看到字体中的所有字符?

要使用存在于您正在使用的字体中的不同图标，您只需要将data-icon属性更改为相应的html实体(&#*****;)。要获取此代码，请从您要使用的字体中复制字符，并将其粘贴到本页的"已解码"框中:

HTML实体编码器/解码器

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

相关文章：