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

Question

它们是互联网上可用的大量图标图像。我刚刚下载了这个，问题是我不知道如何使用它，我正在寻找一些关于这个主题的教程，但找不到一些有用的东西。这里有人知道如何使用这些图标吗？

Answer 1

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

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

基本上，您将background-image所有图标设置为一个，然后将其重新定位background-position

Answer 2

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

如果您只有矢量，例如 .ai 或 .eps 格式，您可以使用矢量编辑器（如 Adob​​e Illustrator）将其导出为 SVG。遗憾的是，对 SVG 的支持不如对 webfonts 的支持。更好的选择可能是自己制作 webfont。有几个可用的选项，我在应用程序Glyphs上取得了成功，但它可能很耗时。

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