我目前正在开发HTML / CSS模板，我将实现以下社交媒体图标：
http://www.premiumpixels.com/freebies/41-social-media-icons-png/
它们是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行。
干杯
答案 0 :(得分：3)
答案 1 :(得分：2)
由于它是您正在构建的模板，我建议为用户提供两种选择。
他们可以使用一个精灵，其中包含最受欢迎的图标，如Facebook，Twitter，YouTube等。
另一个包含所有图标的精灵。
然后让模板的用户选择要与模板一起使用的精灵。
如果您在精灵的顶部包含“最受欢迎的图标”并且其中包含大量精灵，那么无论使用哪种精灵，您的CSS都可以相同。
基本原则是尽可能少的http请求，这样做会导致一个http请求的目标，但文件大小较小，可选的较大。
答案 2 :(得分：1)
为一般的精灵容器创建一个类。
创建用于定位精灵的单个类。他们如何安排并不重要。我们的想法是减少HTTP请求。