icon的多种实现

一、使用image实现

• 注意img的大小设置
• 使用vertical-align对齐
• 所有都兼容

缺点：
img数量多可能导致请求数过多
http1.0客户端：反应慢，每个请求要花时间去建立
服务器：请求多造成线程过多，产生压力
产生流量多，流量要花钱

二、CSS Sprites

• 设置width，height，background-position

• 精灵图生成：
  1、命令行：npm css sprites，可以找到 sprity。通过文档中的 sprity-cli 来查看如何在命令行中使用它
  2、在线工具 CSS Sprite Generator

• 所有都兼容

缺点：
1、无法缩放
2、不好修改

三、Icon Font 把字体做成图标

• 制作字体文件
• 声明font-family
  1、使用本地链接
  2、使用第三方链接
• 使用font-family @font-face
  1、使用html实体（所有都兼容）
  2、使用CSS:before（IE6不兼容）

四、CSS画Icon

• IE支持不太好，比如border-radius IE8-不支持

五、SVG

• img src=svg
• SVG symbol 它是以标签的形式来组织所有的图片的，移动端首选
• 优点：可以方便的修改 icon 的大小、颜色，缩放没有锯齿
• IE9+