1.使用image来实现
注意:
1.要小心的设置image的宽高。
2.要注意设置vertical-align。
3.这种方式请求数过高。
Tip:请求时邪恶的吗?
明明可以发更少的请求,你却发了更多的请求,这才是邪恶的。
2.使用CSS Sprites来实现
- 生成精灵图的方法:
1.命令行:Sprity create build resourse/*png -s style.css
2.用在线工具:https://www.toptal.com/developers/css/sprite-generator - 优点:节约请求
- 缺点:
1.无法缩放
2.不好修改
3.使用Icon Font来实现
- 过程
1.制作字体文件
2.声明font-family
(1)使用本地链接
(2)使用第三方链接
3.使用font-family
(1)使用html实体
(2)使用CSS:before
4.使用CSSicon来画
5.使用SVG来实现
1.img src=svg
2.SVG“sprites”