如何制作一个icon

1. img法

---

PSD文件: ps如何裁剪出一个icon?
右键点击该图层，选择复制图层，在新出对话框里选择new（新建）

我们得到一个只有该图层的图片，然后点击image选择trim ok,切完啦。

2. background法

---

CSS代码：

    .icon{
        display: inline-block;
        background: transparent no-repeat 0 0;
        background-image: url(./xxx.png)
    }
复制代码

3. background合一法(雪碧图)

---

• 其实和第二种方法原理一样，只是将多张图片合成一张图片，然后每张图片只显示需要显示的部分，这样可以优化加载速度。
• 这里推荐一个自动生成雪碧图的网站

4. iconfont

---

阿里巴巴图标库一个有很多矢量icon的地方 三种引用方法,具体看帮助文档

• html(unicode引用)
• css(font-class引用)
• js(symbol引用)