【发布时间】：2012-09-03 01:20:07
【问题描述】：
使用图标的最佳做法是什么？
我应该在我的 html 中输入图标吗？还是我应该使用 CSS 背景？
另外，如果我想同时指定图像（透明背景）和其他背景颜色（不想每次都创建新的 .png 文件）怎么办。
任何帮助表示赞赏。谢谢！
【问题讨论】：
【发布时间】：2012-09-03 01:20:07
【问题描述】：
我更喜欢为图标使用 CSS 背景 - 这也意味着我可以为所有图标使用精灵，并为每个实例适当地放置它们，从而减少对服务器的调用。
如果相同的图标出现在不同的背景上，我将创建 2 个精灵 - 1 个用于浅色背景，1 个用于深色背景，或者您可以使用透明的 PNG-24。这是一个更大的文件大小，但透明度没有遮罩，因此适用于所有彩色背景。请记住，IE6 不支持透明 PNG，因此您可能需要一个备用方案（如果您关心的话）。
【讨论】：
CSS 通常更好，因为您可以使用CSS sprites 并添加悬停效果。另外，因为您使用的是 CSS，所以您只需向元素添加一个类，精灵就会出现，这使得这是一个更加灵活的解决方案。
<span class="icon">Icon</span>
CSS：
.icon {
background: (images/icon.png) 0 0 no-repeat;
width: 25px;
height: 25px;
text-indent: -10000px; /* hides the text */
display: inline-block; }
.icon:hover { background-position: 0 25px; }
我建议在 CSS 上使用 <img> 的唯一情况是用于您网站的徽标 - CSS 不允许您右键单击 -> 查看图像。
【讨论】：
-
为什么有人需要右键单击才能查看特定图像？ Plus Firefox 允许您在大多数情况下右键单击 -> 查看背景图像。当出于任何原因未与 HTML 和 CSS 一起加载图像时，仍应看到站点徽标。对于 HTML 图像，替代文本仍将显示，但视口之外的文本将保持不可见，这就是为什么有人应该在 IMO 的这些情况下使用 HTML 图像。
-
@FelipeAlsacreations - 我喜欢你的回答。
两者：对于任何图像，这取决于这是image that conveys information 还是decorative image。
传达信息的图像
它必须是带有有意义的替代文本的 HTML 图像（例如：仅由该图像组成的链接。链接不得为空，因此该图像不能是 CSS 图像，否则该链接将为空。
装饰图片
背景图像或精灵的一部分或自定义字体字符或带有空替代文本的 HTML 图像（后者如果是作者只会在内容中使用一次作为装饰并且您不会添加到样式表）
Appropriate Use of Alternative Text（编辑：WebAIM）
编辑：用户看不到任何图像的一种情况是，如果他使用High Contrast Mode。然后，如果他在仅由没有文字的大“图标”组成的菜单中看不到任何链接，那就太糟糕了。如果他看不到链接项目前面的项目符号，但这些链接的文字仍然很清楚，那么可以。
图像不会出现在页面上的还有很多其他原因，无论是 Wi-Fi 不稳定、连接速度慢、移动设备成本、代理或家长控制有问题、用户决定等
【讨论】：
使用矢量文件并将其存储在字体中。 这种方法适用于未来未知的分辨率——比如视网膜。除了图标应该是矢量绘制的，因此保持它们矢量是一个明显的步骤。
http://css-tricks.com/examples/IconFont/
http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/
【讨论】：