CSS4：图标全解1.img方法1.1如何提取psd文件中图层中的图标右键选中该图层右键选中该图层，将该图层放入新文件点击图片的裁剪按钮即可自动裁剪图片将画布尺寸调整到最小，将图片设置为相同的长宽，然后将PNG导出到页面。PNG图片默认会保持比例，所以你只需要设置宽度和高度其中之一即可。切口的前端现在基本没有了。.属于落后技术1.2如果设计师给的是PNG（设计师不专业），就用PS按钮。具体步骤是选中按钮，裁剪，得到一张新图片，用魔棒工具选中按钮，反选，删除背景，裁剪，调整大小1.3第一种方法引入图标代码直接使用img标签2.background-icon方法2.1引入图标代码的第二种方法是使用图标作为div的背景图[display,inline-block]。优点是图片大小固定，不跟随div2.2Spritemap（雪碧图）精灵直接搜索CSSspritesGenerator，不要自己手动做，请上传PNG文件到css.spritegen.com，自动生成一整个文件，图片另存为，然后复制粘贴代码代码，修改sprite贴图的方法老套了，现在已经很少用了。3.iconfont-HTMLformusingiconfont.cn网站的总体原理：将字体变成图标，字体中的字母会有图标3.1iconfont.cn使用方法：添加很多iconfont.cn的图标到购物车并将这些图标组成新字体。知识点：如果一个html字符实体的实体编号大于某个值，则以x开头，x用十六进制表示。比如'Your'编码表示所有的符号，大于小于，空格，文本，都可以用实体编码来表示，浏览器会解析所以使用font方式：4.iconfont-CSS形式可以使用pseudo-classCSS添加图标4.1使用css的第二种简单方法是告诉浏览器我是否为这个容器使用iconfont字体。源码：原理第二类是写里面的icon是什么然后用span这种方法快被淘汰了现在来看第三种方法5.SVG图标（推荐）目前大家比较喜欢用这种方法5.1使用sketch制作SVG图片，插卡看SVG图片的特点SVG其实就是一段代码浏览器可以解析这段代码，变成图形渐变，五点的位置星号都是代码。根据代码，可以生成图形。只需将代码放入浏览器，图形就会出现。表5.2使用iconfont.cn引用SVG查看帮助文档1、2导入js和style3直接将SVG当成矢量图不失真，默认居中如果是没有颜色的SVG，可以使用fill属性改变它，如果有颜色，则不能使用。您也可以在svg笔画之后制作图标。这是SVG的时代。它可以是渐变的、未失真的，甚至是动态的。建议随时使用第三种SVG方法。6.使用CSS干图标（不推荐）cssicon.space只使用css制作图标
