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为对应的

复制css

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写法

• 使用更简洁的方式

  
  
  具体使用
  
  
  css源码
  
  

  说明：大小通过font-size改变，颜色通过color改变

SVG icon

• svg代码干了啥

  
  
  代码

• 显示效果

  
  
  svg显示效果

• svg的js代码就是在页面上创建了一个svg标签，然后将icon藏在其中，用的时候使用use标签调出来

  
  
  svg的javascript代码

• svg使用

  
  
  svg使用

• svg默认居中

  
  
  默认居中

• 修改颜色，本身有颜色的无法修改

  
  
  修改颜色

• 描边

  
  
  描边