盘点网页图标几种解决方案

一、css sprite 雪碧图

• 减少网络请求的压力
  一是浏览器有一定的并发上限
  二是网络延时，下载单个小图标的耗时远小时一次请求的网络延时
• 建议类似的图标合并
• 不建议大图标合并
• 提前加载图片
• 略微减少图片体积

参考：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文件夹。

参考

1. 浅尝iconfont-----AlloyTeam
   腾讯前端团队对iconfont的使用总结

四、inline svg

优点

• 相对icon font，inline是真正的矢量
• css 控制性好
• 语义化好

缺点

浏览器兼容性差，仅对IE9+有效
而icon font兼容广泛，包括IE6

参考

1. 使用SVG代替icon font-----简书
2. Web 设计新趋势: 使用 SVG 代替 Web Icon Font
   如果你还在使用iconfont作为网页图标的解决方案，就太out了。(玛德)
3. 盘点几种使用svg图标的方法

总结

追求性能和代码优雅用svg
考虑兼容问题用iconfont

图库

1. 阿里巴巴矢量图库
2. Font Awesome图库
3. 优界网-背景图库banner-app素材

制作工具

1. fontello：只支持SVG格式的图片生成
2. icomoon：只支持SVG格式的图片生成。
3. icomoon使用方法

以图换字的方法

隐藏字体，显示背景。

• 设置text-indent:-9999px
• 也可以font-size: 0