icon小图标制作

一、css sprite方法

将多个小图标组合到一张大图片上，这就是传说中的雪碧图，然后运用background-position: X X；定位到雪碧图的不同位置，从而显示不同图标。

以下是具体步骤：
1.阿里巴巴矢量图标库下载自己需要的图标，可自行选择所需颜色、大小、保存方式，这里我保存为png图片格式。

2.可以到http://csssprites.com/这个网站把你下载的多个小图标组合到一张图上，这就是传说中的"雪碧图"。
页面下方有提示每个小图标在雪碧图上的位置信息。

雪碧图

3.准备工作做好了就可以写代码了，只做一个演示，代码非常简单。

4.浏览器中效果

就相当于你写一个字，然后给这个字添加很多的css样式，使它变成了图标的样子。优点如下：

灵活性：可轻松改变图标的颜色、大小或其它css效果
矢量性：图标是矢量的，与像素无关，缩放图标不会影响清晰度。
兼容性：字体图标支持所有现代浏览器（包括糟糕的IE6）
本地使用：通过添加定制字体到你的本地系统，你可以在各种不同的设计和编辑应用程序中使用它们。
图标字体(Icon Fonts)的引入方式有两种:link方法和@font-face 方法。

1.从阿里巴巴矢量图标库的购物车里把图标文件下载到本地，解压，得到很多文件。注意其中的两个就好了，一是demo.html，这是一个使用说明，二是iconfont.css ,这是一个样式文件，待会儿要用到。

2.使用编辑器打开demo.html这个文件，我们只关注<i></i>标签里的内容。（因为我下载了三个图标，所以我这里有三个<i></i>标签）

3.直接复制这三个<i></i>标签到你的代码中（不要更改标签内的内容，也不要更改它的class名，但可以添加class名以定义新的样式），并在文件头部加link标签，将样式文件iconfont.css引入进来，注意路径。
代码如下，非常简单：

4.浏览器中效果

5.添加class名，自己定义新的样式。比如我给中间的企鹅添加class名为“changeColor”，并定义样式

.changeColor{
      font-size: 50px;
      color:pink;
    }

于是它变成了这样：

@font-face 方法原理和link方法一样，只是引入方式不同，还是以那些资源来讲。
1.用编辑器打开iconfont.css这个文件，复制如图红色框中的所有内容。（因为不同浏览器对不同字体的支持度不同，所以我们需要把eot,woff,ttf,svg这四种字体都引入）

2.复制到你的<style></style>标签中即可。

3.打开浏览器就可以看到效果了

4.同样可以修改样式

主要运用伪标签　：before{content:"　"}来实现，这里我们来画一个心形图标，具体步骤如下：
１．下载字体文件，用编辑器打开iconfont.css文件，可以看到下图这样一句代码。其中e64a是这个图标的16进制html实体。

2..icon-heart::before{ }在“你”字前面添加图标图标实体，link引入css样式文件从而设置这个图标实体的样式。

`1M_3BOHS7(P)82)1(CUW_1.png

3.浏览器显示效果

知识点补充：
1. 图标网站有很多，如：icomoon，fontello，阿里巴巴矢量图标库等，选择自己喜欢的就好。
2.浏览器对字体支持情况