PS做法
-
查看icon对应图层
查看图层
右键打勾查看
说明：点击眼睛按钮，消失的就是对应图层；还有就是右键对应图标，打钩的就是对应的图层
-
如何抠图
1.复制图层
右键图层，复制对应图层
2.新建图层
命名
新建图层只有刚刚复制的那个图
3.裁剪图片
trim裁剪
点击OK
裁剪完成
4.修改画布尺寸
看图片画布的尺寸并不是100x100，这里我们修改下画布尺寸
修改画布尺寸
输入宽高
5.导出图片
导出png
保存
对于旧版的，需要按下面的操作导出
save for web
右上下拉框选择png -
测量距离
测量距离 -
总结
好处：这种ps做法的好处在于可以自适应宽高，因为图片会默认保持原始比例，只设置宽高中的一个就行
自适应宽高
background-icon做法
-
选择要抠出来的部分
选择
crop修剪出想要的部分 -
源文件是png，先抠图
放大图片，选择魔法棒工具
魔法棒工具
先点击要选的图像，然后按shift再选
选择图像
反选无关区域
反选
按前面的方式trim裁剪，设置画布大小，导出png -
代码
代码 -
效果
效果
sprites图 精灵图法
1.查找css sprites generator生成精灵图
2.拷贝生成的css，改动div的class为对应的
3.原理：其实就是通过设置background-position来设置x和y尺寸露出对应的部分
icon-font法
icon-font HTML形式
原理：在一个字体文件中，我输入一个A，然后会显示出对应字形的A，这时因为一开始就定义好了，A这个代码就指定了A显示出来对应的样子。所以，如果我定义了一个字体库，然后规定你先声明使用这个字体库，当输入字体库中对应的代码时，显示对应的图标，就能实现icon-font的做法。
-
html转义
如果要直接输入空格来显示多个空格效果，无法达到，这时需要html转义
html转义
html entity html实体
html实体
用编号表示 -
文字转换为unicode
转化unicode
html识别unicode 为什么icon-font用e61开头？
因为约定e610-e614这段是没有别的字符的-
使用icon-font
1.第一步：引入字体文件
第一步
2.第二步：声明字体文件
上图虽然输入了icon对应代码，但是没有效果，因为没有规定使用的是哪个字体文件，而输入的字体unicode在当前字体文件中是空的，所以不显示，这时设置div的字体库
设置字体库
icon-font CSS形式
IE6不支持，
-
使用更简洁的方式
具体使用
css源码
说明：大小通过font-size改变，颜色通过color改变
SVG icon
-
svg代码干了啥
代码 -
显示效果
svg显示效果 -
svg的js代码就是在页面上创建了一个svg标签，然后将icon藏在其中，用的时候使用use标签调出来
svg的javascript代码 -
svg使用
svg使用 -
svg默认居中
默认居中 -
修改颜色，本身有颜色的无法修改
修改颜色 -
描边
描边
