1

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

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

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

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

4

4 回答 4

2

我更喜欢为图标使用 CSS 背景——这也意味着我可以为所有图标使用精灵，并为每个实例适当地定位它们，从而减少对服务器的调用。

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

于 2012-09-03T01:30:23.917 回答
2

两者：对于任何图像，这取决于这是传达信息的图像还是装饰图像。

传达信息的图像

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

装饰形象

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

适当使用替代文本（编辑：WebAIM）

编辑：用户看不到任何图像的一种情况是，如果他使用High Contrast Mode。然后，如果他在仅由没有文字的大“图标”组成的菜单中看不到任何链接，那就太糟糕了。如果他看不到链接项目前面的项目符号，但这些链接的文字仍然很清楚，那么可以。
还有许多其他原因导致图像不会出现在页面上，无论是 Wi-Fi 不稳定、连接速度慢、移动设备成本、代理或家长控制有问题、用户决定等

于 2012-09-03T01:53:25.017 回答
2

CSS 通常更好，因为您可以使用CSS 精灵并添加悬停效果。另外，因为您使用的是 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; }

唯一一次我建议使用<img>over CSS 是用于您网站的徽标 - CSS 不允许您右键单击 -> 查看图像。

于 2012-09-03T02:00:07.853 回答
1

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

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

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

于 2012-09-03T01:45:05.473 回答