一、css sprite 雪碧图
- 减少网络请求的压力
一是浏览器有一定的并发上限
二是网络延时，下载单个小图标的耗时远小时一次请求的网络延时 - 建议类似的图标合并
- 不建议大图标合并
- 提前加载图片
- 略微减少图片体积
二、base64
优点
- base64的图片会随着html或者css一起下载到浏览器,减少了请求.
- 可避免跨域问题
缺点
- 老东西（低版本）的IE浏览器不兼容。
- 体积会比原来的图片大一点。
- css中过多使用base64图片会使得css过大，不利于css的加载
应用场景
- 应用于小的图片几k的，太大的图片会转换后的大小太大，得不偿失。
- 用于一些css sprites不利处理的小图片，如一些可以通过background-repeat平铺来做成背景的图片。
生成base64
- 一些在线工具
- webpack的url-loader
由于base64的特点，url-loader允许配置只对小于某一值的图标转换成base64，否则就会适得其反。
参考： css sprite 与 base64 ------cnblogs
三、icon font 字体图标
特点
- 纯色图标
- 矢量图标
优势
- 灵活性，改变图标的颜色，背景色，大小都非常简单
- 兼容性，兼容所有流行的浏览器，不仅h5可以使用iconfont，app也可以使用iconfont，关于这方面可以查看其它线上分享
- 扩展性，替换图标很方便，新增图标也非常简单，也不需要考虑图标合并的问题，图片方案需要css sprite
- 高效性，iconfont有矢量特性，没有图片缩放的消耗高
- 在使用上字体文件和普通的静态资源一样，既可以外链也可以内链，并且字体文件也可以使用gzip压缩
- 在移动端上，可以只使用truetype类型，非常灵活小巧
缺点
- 制作iconfont需要svg设计稿，对于开发来说没有图片来的方便
- 只能是纯色
webpack中如何配置？
webpack中一般使用url-loader处理4类字体文件，将体积较小的文件转化成base64置入到css中，体积较大的文件file-loader到指定images文件夹。
参考
- 浅尝iconfont-----AlloyTeam
腾讯前端团队对iconfont的使用总结
四、inline svg
优点
- 相对icon font，inline是真正的矢量
- css 控制性好
- 语义化好
缺点
浏览器兼容性差，仅对IE9+有效
而icon font兼容广泛，包括IE6
参考
- 使用SVG代替icon font-----简书
- Web 设计新趋势: 使用 SVG 代替 Web Icon Font
如果你还在使用iconfont作为网页图标的解决方案，就太out了。(玛德) - 盘点几种使用svg图标的方法
总结
追求性能和代码优雅用svg
考虑兼容问题用iconfont
图库
制作工具
- fontello：只支持SVG格式的图片生成
- icomoon：只支持SVG格式的图片生成。
- icomoon使用方法
以图换字的方法
隐藏字体，显示背景。
- 设置text-indent:-9999px
- 也可以font-size: 0