CSS：字体图标的产生和优点

字体图标在网页中经常使用，它的使用场景：主要用于显示网页中通用的、常用的一些小图标。

例如：

精灵图虽然有很多优点，但缺点也是很明显的：
1）图片文件还是比较大的。
2）图片本身放大或缩小会失真。
3）一旦图片制作完成再想更换非常复杂。

此时，字体图标（iconfont）技术很好地解决了上述问题。
字体图标提供了一种方便高效的图标使用方式，展示的是图标，本质属于字体。它有诸多优点：

• 轻量级：一个字体图标要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
• 灵活性：本质其实是文字，可以随意改变颜色、大小、产生阴影、透明效果、旋转等。
• 兼容性：几乎支持所有的浏览器。

说明：字体图标不能完全替代精灵技术，只是对实际工作中图标部分技术的提升和优化。字体图标的样式一般比较简单。遇到复杂的背景图片，还是要通过精灵图等图片技术展示。

总之：
1）如果遇到一些结构和样式比较简单的小图标，就用字体图标。
2）如果遇到一些结构和样式复杂的小图片，就用精灵图。

例如，京东网页使用的字体图标，有大小、颜色：

可以随意更改大小：

可以随意更改颜色：