css - Font Awesome Icons 作为列表项或普通背景图像？

Question

目前我使用图像作为元素列表的背景:

.price_item ul li {
  background: url('/images/left_arrow.png') no-repeat right;
  background-size: 12px;
  list-style: none;
 }

图像是725B。但是，我正在考虑用 Font Awesome 图标(字体)替换它。我的问题是，就性能和与不同浏览器的兼容性而言，哪个更好？我个人认为 Awesome 图标加载速度更快，因为它只是一种字体。相反，由于使用它们不像普通背景图像那样简单，我担心兼容性。那么，在这种情况下值得使用 Font Awesome 图标吗？

Answer 1

是的，你应该使用字体图标。它现在非常流行，而且在性能方面它比图像更好。以下是一些好处。

• 使用 CSS 进行缩放，使用 Apple 的 Retina 设备没有问题。
• 您可以通过 css 赋予任何颜色，无需去 photoshop 更改图标颜色。
• 使用多个图标和重叠图标
• 使用 CSS3 设置不透明度或旋转。
• 图标不再有 sprite 图片。

它兼容 IE7 及更高版本、FF、Chrome、Safari 和所有其他现代浏览器。