ICON图标

1、image
.img的大小设置
.img的vertucal-align: middle
.请求数过多

2、CSS 精灵图
.Ps拼图
.命令行工具 sprity create build resource/*.png -s style.css
.用在线工具 https://www.toptal.com/developers/css/sprite-generator
.无法缩放 不好修改

3、icon Font 字体图标
.制作字体文件 阿里巴巴矢量图网
.声明font-family 1\使用本地连接 2\使用第三方连接
.使用font-family 1\使用html实体 2\使用css:before
.@font-face{font-family:"xxx"; src:url(); src:url();}

4、CSS icon
.用css画icon

5、 SVG
.img src=svg
.SVG 'sprites'
.npm svg sprite

<svg> <use xlink:href="#search"></user> </svg>