（第一次写，内容有点拉胯，等以后学的内容多了，尽量让内容有观看价值，请各位大佬多多包涵，谢谢）
产生：
精灵图是有诸多优点的，但是缺点很明显
1.图片文件还是比较大的。
2.图片本身放大和缩小会失真
3.一旦图片制作完毕想要更换非常复杂。
优点：
此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体
优点：
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等
兼容性：几乎支持所有的浏览器，请放心使用
注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
总结：
1.如果遇到一些结构和样式比较简单的小图标，就用字体图标
2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图
使用 第一步：
打开压缩后的icomoon文件夹，找到其中的style.css
第二步：
然后复制其中的@font-size——block；}
第三步：
粘贴到刚刚的html文件中的标签中
第四 步：
找到icomo文件夹中的demo.html，找到自己想要的图标，右下方有一个小方块，点击然后复制它
第五步：
回到刚刚的html文件中，在内部找到标签，将这个小方块粘贴上去
第六步：
在中，输入插入方块的选择器，然后输入相应字体类型为‘icomoon’，再输入合适字体大小和颜色即可
最后是这样的：
