一、css sprite方法
将多个小图标组合到一张大图片上，这就是传说中的雪碧图，然后运用background-position: X X；定位到雪碧图的不同位置，从而显示不同图标。
以下是具体步骤：
1.阿里巴巴矢量图标库下载自己需要的图标，可自行选择所需颜色、大小、保存方式，这里我保存为png图片格式。
2.可以到http://csssprites.com/这个网站把你下载的多个小图标组合到一张图上，这就是传说中的"雪碧图"。
页面下方有提示每个小图标在雪碧图上的位置信息。
雪碧图
3.准备工作做好了就可以写代码了，只做一个演示，代码非常简单。
4.浏览器中效果
二、使用图标字体在网页中画icon小图标(font+html)
就相当于你写一个字，然后给这个字添加很多的css样式，使它变成了图标的样子。优点如下：
- 灵活性：可轻松改变图标的颜色、大小或其它css效果
- 矢量性：图标是矢量的，与像素无关，缩放图标不会影响清晰度。
- 兼容性：字体图标支持所有现代浏览器（包括糟糕的IE6）
- 本地使用：通过添加定制字体到你的本地系统，你可以在各种不同的设计和编辑应用程序中使用它们。
图标字体(Icon Fonts)的引入方式有两种:link方法和@font-face 方法。
（1） link方法引入图标字体样式
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;
}
于是它变成了这样：
（2）@font-face 方法引入
@font-face 方法原理和link方法一样，只是引入方式不同，还是以那些资源来讲。
1.用编辑器打开iconfont.css这个文件，复制如图红色框中的所有内容。（因为不同浏览器对不同字体的支持度不同，所以我们需要把eot,woff,ttf,svg这四种字体都引入）
2.复制到你的<style></style>标签中即可。
3.打开浏览器就可以看到效果了
4.同样可以修改样式
三、使用图标字体在网页中画icon小图标(font+css)
主要运用伪标签 ：before{content:" "}来实现，这里我们来画一个心形图标，具体步骤如下：
１．下载字体文件，用编辑器打开iconfont.css文件，可以看到下图这样一句代码。其中e64a是这个图标的16进制html实体。
2..icon-heart::before{ }在“你”字前面添加图标图标实体，link引入css样式文件从而设置这个图标实体的样式。
`1M_3BOHS7(P)82)1(CUW_1.png
3.浏览器显示效果
四、总结
- css sprite方法兼容性完美，但是缩放会导致图标失真，后期维护困难
- font+HTML方法兼容性完美，缩放不失真，后期维护简单
- font+css不支持IE低版本，缩放不失真，后期维护简单
知识点补充：
1. 图标网站有很多，如：icomoon，fontello，阿里巴巴矢量图标库等，选择自己喜欢的就好。
2.浏览器对字体支持情况
© 本文归饥人谷和本人所有，如需转载请注明来源。
网友评论