icon的各种做法

img法
background法
background合一法
font法
SVG法
CSS法

img法

操作步骤（拿到的设计师的.psd后缀的设计稿）

如何选中图层？

Ctrl+左选，选中所需要的图层（也可点击右边栏对应的图层）

如何将图层抠出来？

将想要的图层右键，选中复制图层（Duplicate Layer），文档选为新建确定，然后在image（图像），点击裁切（trim），即可得到想要的图层。（调整画布大小，点击图像（image）里面的画布大小（canvas size），修改自己想要的尺寸即可）

这种方法的好处：可以自定义宽高（注意：不可让图片变形，所以只写高或者只写宽）

操作步骤（拿到的设计师的.png后缀的设计稿）

如何选中图层？

用矩形选框工具，选择自己想要抠图的图层，然后点击图像（image）里面的裁剪（copy）

如何将图层抠下来？

选择对象选择工具，右键选择魔棒工具，选择自己留下的图层，然后右键选择反向删除即可，然后修改图片大小。

background法

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的页面</title>
    <style>
      .icon > .icon {
        margin: 5px 25px;
        display: inline-block;
        width: 100px;
        height: 100px;
        background: transparent url(./qq.png) no-repeat 0 0;
      }
      .icon > .icon.qq {
        background-image: url(./qq.png);
      }
      .icon > .icon.weibo {
        background-image: url(./weibo.png);
      }
      .icon > .icon.weixin {
        background-image: url(./weixin.png);
      }
    </style>
  </head>
  <body>
    <div class="icon" style="text-align: center">
      <div class="icon weibo"></div>
      <div class="icon weixin"></div>
      <div class="icon qq"></div>
    </div>
  </body>
</html>