1、切图
首先拿到设计稿，在ps里选中要用的图层，右键，复制图层，选择新的文件，裁剪，改图层大小，导出(如果里面没有图层，先用剪切工具剪出图片再按上面方法即可)
复制图层
裁剪
改图层大小
导出
剪切
2、backgound icon
（在html中，icon用 img 做时，宽高会自动保持比列，只要给宽度或者高度即可。）
当html中，icon用 div 做时，可以在背景中加入图片（图片不会随div宽高改变而改变）。
no-repeat：宽高多余时不会重复图片
不加no-repeat情况
css sprites(雪碧图)：用工具生成即可。（google: css sprites generator. 原理就是把上传的几张图合并成一张，一张图里有全部的图标，然后用css把不需要的图标隐藏）
3、iconfont - HTML形式
选Unicode就是HTML形式
4、iconfont - CSS形式
css形式
5、SVG-icon
有颜色的图标不能改颜色
svg形式
6、纯CSS画icon
参考：https://cssicon.space/#/
网友评论