我们以阿里巴巴矢量图标库举例，地址：http://www.iconfont.cn/
在这里，你可以上传你的矢量图标，也可以直接使用现成的小图标。
为什么要用这些个图标字体，本文就不介绍了，请自行百度。
下面，我将介绍如何使用iconfont图标字体。
假设，有一个项目，在登录的时候需要两个小图标，一个是代表帐号，另一个代表密码的图标，大概就是这样：
图片的红框处，我们需要俩个小图标。以前的做法肯定是做图片啦，现在就可以用iconfont字体图标代替了。操作如下：
第一步：你得有一个阿里巴巴矢量图标库帐号。
咳，咳（这一步略。。。。。。）
第二步：搜索你想要的图标，操作如下：
回车，搜索。
出来了很多的小图标，选择一个你喜欢的。
我们这里选择这个，点击前面的小车车，把图标放进我们的暂存架中。
已经有一个图标了，我们还要选择一个密码图标，操作类似。操作完成如下：
第三步：储存为项目。
选择“储存为新项目”，如果是给项目追加图标就选择“储存为历史项目”，我们这里选择储存为新项目
输入项目名称，储存
自动跳转到后台；如下所示：
第四步：生成代码
点击“获取在线链接”生成在线链接
图标生成成功，如下所示：
第五步：在项目中使用iconfont字体图标
第一种使用方法：
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> @font-face { font-family: 'iconfont'; src: url('//at.alicdn.com/t/font_1476968077_2697372.eot'); /* IE9*/ src: url('//at.alicdn.com/t/font_1476968077_2697372.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/font_1476968077_2697372.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/font_1476968077_2697372.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/font_1476968077_2697372.svg#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont{ font-family: iconfont; font-size: 16px; font-style: normal; display: inline-block; -webkit-text-stroke-width: 0.2px; /* 严重的锯齿,对字体图标的边缘进行模糊 */ } </style> </head> <body> <span class="iconfont"></span> <span class="iconfont"></span> </body> </html>
第二种使用方法：
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> @font-face { font-family: 'iconfont'; src: url('//at.alicdn.com/t/font_1476968077_2697372.eot'); /* IE9*/ src: url('//at.alicdn.com/t/font_1476968077_2697372.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/font_1476968077_2697372.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/font_1476968077_2697372.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/font_1476968077_2697372.svg#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont{ font-family: iconfont; font-size: 16px; font-style: normal; display: inline-block; -webkit-text-stroke-width: 0.2px; /* 严重的锯齿,对字体图标的边缘进行模糊 */ } .icon-user:after{content: "e600";} .icon-pwd:after{content: "e601";} </style> </head> <body> <span class="iconfont icon-user"></span> <span class="iconfont icon-pwd"></span> </body> </html>
推荐使用第二种。
浏览效果如下：
在使用中可能会遇到的问题？
错误提示如下：
找不到文件路径，因为我们使用的是相对路径，它去我们本地找这个文件，肯定是找不到的，解决方法有以下两种方法。
第一种：下载图标到本地。
在配置为本地的路径，就可以了
第二种：把相对路径改成绝对路径
给加上http就可以访问了。
本教程到这里就结束了。赶快去试试吧(*^__^*)