Javascript 将矢量图形/图标作为一个类包含在HTML5中？

如上所述，要在网页中包含一个glypicon图标，我们只需在span元素中提到它的类，如下所示：

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

我们有一些.ai格式的文件，可以转换成任何格式（.jpg、.png、.svg等）

---

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

查看引导页面的源代码，他们通过将图标变成字体来实现这一点。我建议使用这种方法，因为它是一种简单而紧凑的方法。您可以使用如下字体编辑器：

它似乎对上传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}";
}

---

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

即使对于大而复杂的svg文件，也可以使用此技术吗？@coder，对于svg，“大”不是问题。然而，这是复杂的。但最好的方法是尝试一下，因为这是唯一完全跨浏览器的方法。当您导出Illustrator文件时，应该有一个选项将点导出到“x”-许多小数位。将SVG导出到小数点后1位很好，可以降低SVG的复杂度。此iconmoon.io是否有助于将SVG转换为字体？@coder如果您只需单击导入按钮，看起来您只需选择SVG图标，然后将其放入字体中。