版权声明：本文为博主原创文章，未经博主允许不得转载。
css雪碧图
以前最经常使用的小图标都会做css雪碧图，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
他的优点是
- 减少加载网页图片时对服务器的请求次数
- 提高页面的加载速度
- 减少鼠标滑过的一些bug
但是他的缺点也是挺让人烦恼的
- CSS雪碧的最大问题是内存使用
- 拼图维护比较麻烦
- 使CSS的编写变得困难
因为他的使用比较繁琐，注意的问题较多，字体图标只要一个简单的文件，就能实现图标的展示，而且控制图片就当文字来css编辑，图标的大小，粗细，颜色前端开发人员改起来就简单多了，所以css雪碧图慢慢的就被遗弃了。
font-awesome
现在，字体图标使用简单而被广泛的使用。原理是很简单的，利用字体工具把我们平时 Web 上用的图形图标（icons）转换成 web fonts，就成了 icon fonts。因为字体是矢量化图形，它天生具有「分辨率无关」的特性，在任何分辨率和PPI下面，都可以做到完美缩放，不会像传统位图， 如：png，jpeg，放大后有锯齿或模糊现象。使用它可以轻松地解决雪碧图所遇到的问题，因为一旦将 icons 当作普通 text 来处理，自由改变字体大小，自由演变字体颜色，有了 CSS3 的支持，可以添加一些视觉效果如：阴影 ，透明度等，旋转几下是相当轻松的。
最具有代表性的应当属font-awesome莫属了，使用起来也是相当简单的。
引入文件
方法一：将以下代码粘贴到网页HTML代码的
部分.<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">方法二：下载 font-awsome 字体图标文件到本地，复制整个 font-awesome 文件夹到您的项目中。在HTML的
中引用font-awesome.min.css。<link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">html中使用字体图标
<i class="fa fa-home" aria-hidden="true"></i>
Iconfont
使用字体库
随着字体图标的发展，前端的广泛使用，基本的font-awesome的字体图标数量已经满足不了需求。
Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用 图标并还在持续更新中，Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。有了它，妈妈再也不用担心我找不到合适的图标了。
用法也是相当的简单：
- 进入官网 icon-font
点击搜索你需要的icon
点击加入购物车， 添加完成之后，最后点击右上角的购物车，添加至项目（或创建新的项目）
下载到你的本地
把下载的文件的icon-font.css文件copy到你的项目文件中，引用文件
<link rel="stylesheet" href="../css/iconfont.css">在html添加代码：
<i class="iconfont icon-home"></i>
添加svg文件生成字体
如果你想自定义生成自己想要的图标，那icon-font也可以帮助你实现
- 点击上传的图标，进入上传界面
- 选择已经做好的svg图片，保存提交，之后就回到字体使用的步骤了
