javascript - 在 HTML5 的跨度中将矢量图形/图标作为一个类包含在内？

Question

正如在 this bootstrap page 上明确给出的那样, 要在我们的网页中包含一个 glypicon 图标，我们所要做的就是在 span 元素中提及它的类，如下所示:

<span class="glyphicon glyphicon-search"></span>

我们有一些 .ai 格式的文件，可以将其转换为任何选择的格式(.jpg、.png、.svg 等)。

我想知道这是如何实现的，文件的格式是什么，除了 HTML 代码之外要包含的 JS 和/或 CSS 代码是什么。

Answer 1

查看 Bootstrap 页面的源代码，他们通过将图标设为字体来完成此操作。我建议使用此方法，因为它是一种简单而紧凑的方法。您可以使用这样的字体编辑器:http://icomoon.io/app/#/select

它似乎对将 SVG 上传到它有相当不错的支持，因此您可以制作自己的字体。

然后您可以在 css 中导入您的字体，例如:

@font-face {
    font-family: 'my-vector-font';
    src: url('my-vector-font.eot');
    src: local('my-vector-font'), 
         local('my-vector-font'), 
         url('my-vector-font.ttf') format('truetype'),
         url('my-vector-font.svg#font') format('svg'); 
}

...然后在 css 中使用它，例如:

.icon-1:before {
    font-family: 'my-vector-font';
    content: "{CHARACTER_FOR_ICON}";
}

您可以根据需要使用填充等调整该选择器。