使用矢量图标图像中的图标

Question

他们在网上有很多图标图片。我刚刚下载了this一个和 问题是我不知道如何使用它，我正在寻找关于这个主题的一些教程，但找不到一些有用的东西。 这里有谁知道如何使用这些图标？

Answer 1

如果您正在谈论使用sprite图片作为图标（尽管您展示的图片不是如何制作精灵的好例子......）

然后，看看这里：http://jsfiddle.net/sWZrh/

基本上，您为所有要设置的图标设置一个background-image，然后只需使用background-position重新定位

Answer 2

通常，图标的作者会为您提供说明。如何使用图标取决于他们的格式。这些天提供图标的最常见方式似乎是网络字体。一个很好的例子是symbolset。

如果您只有矢量，例如.ai或.eps格式，您可以使用矢量编辑器（如Adobe Illustrator）将其导出到SVG。遗憾的是，对SVG的支持并不像webfonts那样好。一个更好的选择可能是自己制作webfont。有几个选项可用，我已经成功使用了应用程序Glyphs，但这可能非常耗时。

如果您最终使用webfont，首先需要包含该字体，并设置目标元素以使用它。然后通过引用正确的字符插入图标。如果结果是SVG图像，则可以使用 img 标记插入它。