html - 社会图标：精灵还是不精灵？

Question

我目前正在开发一个 HTML/CSS 模板，我将实现以下社交媒体图标：

它们以 41 个单独的 .png 文件的形式出现。我想使用 CSS 类将它们包含到我的模板中，以便于使用，如下所示：

<i class="icon-twitter"></i>
<i class="icon-facebook"></i>

现在的问题是，我应该在我的 CSS 类中将每个图标作为一个单独的文件引用，还是应该将所有 41 个图标合并到一个精灵中并调整每个类的背景位置（CSS 精灵技术）？

很明显，可能没有人使用我的主题会在他的网站上使用 41 个社交媒体图标（希望如此）。我想说在一般网站上，一次使用大约 3 或 4 个图标。所以这让我想知道它是否有意义，只使用大约十分之一（41 个中的 4 个）时使用 sprites 技术。

单个文件的文件大小平均约为每个文件 2kb。我创建的精灵大小为 42kb。

这种情况的最佳解决方案是什么？

另外：精灵中的图标如何分布是否重要？我刚刚制作了 2 列和 21 行的图标。它也可能是一列和 41 行，或 6 列和 7 行。

干杯

score 3 · Accepted Answer

您应该将它们全部放入一个精灵中。有一些生成器可以让它很容易做到。

将它们组合成一个 sprite 将减少 HTTP 请求的数量。

score 2 · Accepted Answer

由于它是您正在构建的模板，我建议为用户提供两个选项。

他们可以使用一个精灵，其中包含最流行的图标，如 Facebook、Twitter、YouTube 等。

另一个包含所有图标的精灵。

然后让模板的用户选择要与模板一起使用的精灵。

如果您在与精灵顶部相同的布局中包含“最受欢迎的图标”，并且其中包含所有这些精灵，那么无论使用什么精灵，您的 CSS 都可以是相同的。

基本原则是尽可能少的http请求，这样做会导致一个http请求的目标，但文件大小更小，可选的更大。

score 1 · Accepted Answer

为通用精灵容器创建一个类。

制作单独的类来定位精灵。它们如何排列并不重要。这个想法是减少 HTTP 请求。

3 回答 3