icon的制作方法

　　字体图标的制作方法有这样几种：

　　1. img法；

　　2. background法；

　　3. sprites雪碧图或精灵图；

　　4. font法；

　　5. SVG法；（推荐）

　　6. CSS动手画。

　　

　　方法一，img法，使用Photoshop软件进行切图和修图，实现设计师交给我们的设计稿。设计师可能会给我们两种格式的图片，一种是psd的，可以使用PS剪切图层，一种是png的，使用PS抠图。

　　方法二，background法，background: transparent url(./left.png) no-repeat 0 0; 给div设置背景图片，不方便的地方在于当div的大小比图片的大时，如果不设置no-repeat会连续出现背景图片。

　　方法三，雪碧图，使用谷歌搜索css sprites generator ，雪碧图代码生成器，然后把我们的图标上传，下载生成好的图片，使用生成的css代码，就会出现我们想要的图标了。

　　方法四，font法，这种方法下有两种分支，一种是HTML，一种是css。首先进入到阿里的iconfont的网站，找到我们想要的图标。

　　HTML：

　　

　　将上面生成的代码粘贴到HTML里，将字体图标的代码例如： 放在内联元素中，可以样式加上font-family: iconfont; 还可以通过font-size等调整图标的样式。

　　CSS：

　　

@font-face {
            font-family: 'iconfont';  /* project id 543342 */
            src: url('//at.alicdn.com/t/font_543342_xbsow0p413ui8uxr.eot');
            src: url('//at.alicdn.com/t/font_543342_xbsow0p413ui8uxr.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_543342_xbsow0p413ui8uxr.woff') format('woff'),
            url('//at.alicdn.com/t/font_543342_xbsow0p413ui8uxr.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_543342_xbsow0p413ui8uxr.svg#iconfont') format('svg');
}
.xxx::before{
            content: '\e66a\e653';
}

　　也可以不自己写编码，通过一个link标签，把font-class下的链接地址引入到HTML中，然后给div元素或者span元素加类名就行了，注意样式的优先级。

　　方法五、SVG。使用Symbol栏下的地址，用script标签引入，查看使用帮助，把css代码和SVG标签复制到页面中就可以引用了。支持css修改，放大后没有锯齿，默认居中。

　　方法六，CSS自己画，参考网站：搜索css icon http://cssicon.space/#/