Question

使用图标的最佳做法是什么？

我应该在html中输入图标吗？或者我应该使用CSS背景？

另外，如果我想同时指定图像（透明背景）和其他背景颜色（不想每次都创建新的.png文件），该怎么办。

任何帮助表示赞赏。谢谢！

Answer 1

我更喜欢使用CSS背景作为图标 - 这也意味着我可以为所有图标使用精灵，并为每个实例正确定位它们，因此对服务器的调用较少。

如果相同的图标出现在不同的背景上，我会创建2个精灵 - 1个用于光照，1个用于深色背景，或者你可以使用透明的PNG-24。这是一个更大的文件大小，但透明度没有遮罩，因此适用于所有彩色背景。请记住，IE6不支持透明的PNG，因此您可能需要回退（如果您愿意）。

Answer 2

两者：对于任何图片，它取决于image that conveys information还是decorative image。

传达信息的图像

它必须是一个带有有意义的文本替代的HTML图像（例如：仅由此图像组成的链接。链接绝不能为空，因此图像不能是CSS，否则链接将为空。

装饰图片

背景图片或精灵或自定义字体字符的一部分或带有空替代文字的HTML图像（后者如果是图像作者只会在内容中使用一次作为装饰，并且您不会添加到样式表）

Appropriate Use of Alternative Text （编辑：WebAIM）

编辑：如果用户使用High Contrast Mode，则用户将看不到任何图像的一种情况。然后，如果他在一个只有没有文字的大“图标”的菜单中看不到任何链接，那就太糟糕了。如果他在链接项目前面看不到子弹，但这些链接的文字仍然很清楚，那么OK 还有许多其他原因导致图像无法显示在页面上，无论是片状Wi-Fi，连接速度慢，移动设备成本，错误代理或家长控制，用户决策等等。

Answer 3

CSS通常更好，因为您可以使用CSS sprites并添加悬停效果。另外，因为你正在使用CSS，你只需要在一个元素中添加一个类，然后就会出现一个sprite，这使得它成为一个更加灵活的解决方案。

<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; }

我建议使用<img>而不是CSS的唯一一次是您网站的徽标 - CSS不允许您右键单击 - ＆gt;查看图片。

Answer 4

使用矢量文件并将其存储在字体中。这种方法适用于未来未知的分辨率 - 如视网膜。除了图标应该是矢量绘制所以这是一个明显的步骤，以保持他们矢量。

http://css-tricks.com/examples/IconFont/

http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/

图标：使用HTML还是CSS？

4 个答案: