CSS-icon

PSD怎么切图:

1. 在右下角图层选择器上右键Duplicate Layer（复制图层），Document选择New
2. Image里选择Trim…（裁剪）
3. Image里选择Canvas Size（画布大小），调整图片尺寸
4. File里选择Export（导出成PNG）

PNG怎么抠图:

1. 选择好图片区域，Image里选择Crop（剪切）
2. Quick Selection Tool（快速选择工具），按住shift选择其他你想要的地方，右键Select Inverse（反选），点击键盘上的Del
3. Image里选择Trim…（裁剪）
4. Image里选择Canvas Size（画布大小），调整图片尺寸

5. File里选择Export（导出成PNG）

6. img 法
   <img src="#" alt="">
   好处：可以自适应宽高，只用写height或者width，图片会保持比例

7. background 法
   <div class="icon" style="display:inline-block;background:transparent url(xxx.png) no-repeat 0 0;"></div>
   好处：当图和div的大小不一样是，图片不会变形
8. background 合一法
   CSS Image Sprites（雪碧图）：把多张图连成一张图,用background-position:x y;来只展示一张图中的某一个部分
   CSS Sprites Generator
9. font 法
   阿里巴巴矢量图标库
   HTML字符实体
   HTML形式
   选择好想要的icon，选择Unicode，查看在线链接，点此生成，复制代码到本地css
   <div style="font-family: iconfont;">&#xe614;</div>
   CSS形式
   使用伪类：(IE6不支持)

   //HTML
   <div class="oDiv" style="font-family: iconfont;">&#xe614;</div>
   
   //CSS
   .oDiv::before{
       content:'\e614;';
   }

选择好想要的icon，选择Font class，查看在线链接，点此生成，复制代码在本地html用link标签引入
<span class="iconfont icon-xxx"></span>

5. SVG 法
   选择好想要的icon，选择Symbol，查看在线链接，点此生成，复制代码在本地html用script标签引入

   //HTML
   <svg class="icon" aria-hidden="true">
       <use xlink:href="#icon-xxx"></use>
   </svg>
   
   //CSS
   <style type="text/css">
       .icon {
          width: 1em; height: 1em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
       }
   </style>

好处：不会有锯齿，不会变形，默认居中

6. 新手慎用：「CSS 就是干」法
   CSS ICON