社会图标：精灵还是不精灵？答案

【问题标题】：Social Icons: To sprite or not to sprite?社会图标：精灵还是不精灵？
【发布时间】：2013-02-28 23:34:22
【问题描述】：

我目前正在开发一个 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。

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

另外：sprite 中的图标如何分布是否重要？我刚刚制作了 2 列和 21 行的图标。也可以是 1 列 41 行，或者 6 列 7 行。

干杯

【问题讨论】：

为什么不开始使用 Font Awesome 中的单色图标集？
除了下面的答案之外，您还可以创建两个类，一个类用于浅色背景，一个用于深色背景（如 Bootstrap）。 <i class="theme-dark ico-facebook">&nbsp;</i> 与 <i class="theme-light ico-facebook">&nbsp;</i>
Zlatan：因为我喜欢彩色图标 :) 但是感谢您将我指向 Font Awesome。我不知道这存在。可能是字形图标的一个很好的替代品。 estrar：这些图标适用于所有背景。

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：