CSS高级技巧②——字体图标

虽然精灵图有很多优点，但是缺点也很明显，比如：

1. 图片文件还是比较大的。
2. 图片本身放大和缩小会失真。
3. 一旦图片制作完毕想要更换非常复杂。

所以有了一种技术叫字体图标完美解决了这些问题，字体图标展示的是图标但是实际上是字体，但是字体图标只适合一些简单的图标，遇到复杂的还是建议使用精灵图。

字体图标的下载与使用

1. 推荐使用iconfont-阿里巴巴矢量图标库，因为我自己也是在使用的这个，很全且免费。
2. 然后挑选你喜欢的进入购物车里面。

   

3. 然后下载完成之后解压，进入demo_index.html文件，按照里面步骤引用，我这边用的是第三种Symbol。

   

4. 效果图：

   

5. 完整源码下载：

     此处内容已隐藏，请评论后刷新页面查看.