ICON图标
2019-10-09 本文已影响0人
楼水流云
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>
