1. 什么是图标字体

1.自由的变化大小

2.自由的修改颜色

3.添加阴影效果

4.IE6也可以支持

5.支持图片图标的其它属性，例如，透明度和旋转等等

2. 如何使用图标字体？

要想使用图标字体，首先我们要有图标字体文件，我们以IcoMoon（http://icomoon.io/）网站为我们提供的开源图标字体为例来讲解如何使用。

我们在应用页面http://icomoon.io/app/#/select。选择我们需要的图标字体：

然后点击生成字体文件：

这时可以看到我们刚刚选择的几个图标字体已经生成，点击下载此文件后会得到icomoon.zip的文件。解压后会看到里面有适合各个浏览器的字体以及demo演示：

然后，你就可以依葫芦画瓢使用这些图标形状字体了

　　1.新建index.html

　　2.在style标签里输入以下内容：

@font-face {

font-family: 'icomoon';

src:url('fonts/icomoon.eot'); /* IE9*/

src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('fonts/icomoon.ttf') format('truetype'),/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

url('fonts/icomoon.woff') format('woff'),  /* chrome、firefox */

url('fonts/icomoon.svg#icomoon') format('svg'); /* iOS 4.1- */

font-weight: normal;

font-style: normal;

}

然后我们单独为图标字体设置iconfont类：

.iconfont{font-family:"icomoon";font-size:16px;font-style:normal;}

最后，在页面