图标方案

图标多为网站随处可见，起修饰作用的图片。

常见的解决方案有css splite、iconfont、svg

css splite（雪碧图）

雪碧图（CSS Sprite）又叫CSS精灵图，是一种网页图片应用处理方式，他允许你将一个页面设计到所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求，客户端显示一张图片都会向服务器发送请求，所以图片请求越多，造成延迟的可能性就越大。雪碧图就是为了解决这个问题诞生的

优点

• 减少http请求
• 提前加载好需要用到的图片
• 可以展示任意图像
• 合成后的图片总体大小要小于多个图片和的大小

缺点

• 图标过多时，加载缓慢
• 维护成本高
• 开发效率低

iconfont

顾名思义，IconFont 就是字体图标。严格地说，就是一种字体，但是，它们不包含字母或数字，而是包含符号和字形。您可以使用 CSS 设置样式，就像设置常规文本一样，这使得 IconFont 成为 Web 开发时图标的热门选择。

优点

• 可以方便地将任何 CSS 效果应用于它们。
• 因为iconfont的本质是字体，所以我们可以自由的变换大小和颜色。
• 我们只需要发送一个或少量 HTTP 请求来加载它们，而不是像图片，可能需要多个 HTTP 请求。
• 由于尺寸小，它们加载速度快。
• 它们在所有浏览器中都得到支持（甚至支持到 IE6）

缺点

• 不能用来显示复杂图像
• 作为字体文件，容易受编译影响，出现乱码
• 通常只限于一种颜色，除非应用一些 CSS 技巧
• 字体图标通常是根据特定的网格设计的，例如 16x16, 32×32, 48×48等。如果由于某种原因将网格系统改为25×25，可能不会得到清晰的结果
• 维护成本高

svg

优点

• 矢量图，任意缩放不失真
• 支持多色图标
• 对seo和无障碍功能友好
• 能够在代码或文本编辑器中创建简单的SVG渲染
• 格式具有高度可压缩性和轻量级
• 支持透明度
• 允许静止或动态图像

劣势

• IE浏览器支持不好

总结

• 针对单色图标，使用iconfont。多色图标使用svg
• 需要适配IE9以下的，使用iconfont
• 图标数量较多，使用svg
• 需要无损图标，优先考虑svg
• 条件允许的，优先考虑svg