html 图标制作,icon小图标制作

一、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这个文件，我们只关注标签里的内容。(因为我下载了三个图标，所以我这里有三个标签)

3.直接复制这三个标签到你的代码中(不要更改标签内的内容，也不要更改它的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.复制到你的标签中即可。

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.浏览器对字体支持情况

© 本文归饥人谷和本人所有，如需转载请注明来源。