Question

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

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

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

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

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

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

此方案的最佳解决方案是什么？

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

干杯

Answer 1

你应该将它们全部放入精灵中。有一些生成器可以让它变得非常容易。

将它们组合成精灵会减少HTTP请求的数量。

Answer 2

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

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

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

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

如果您在精灵的顶部包含“最受欢迎的图标”并且其中包含大量精灵，那么无论使用哪种精灵，您的CSS都可以相同。

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

Answer 3

为一般的精灵容器创建一个类。

创建用于定位精灵的单个类。他们如何安排并不重要。我们的想法是减少HTTP请求。