代码：
一、iconfont demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IconFont</title>
<style type="text/css">
@font-face {
font-family: "iconfont";
src: url('font/iconfont.eot?t=1466407979');
/* IE9*/
src: url('font/iconfont.eot?t=1466407979#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/iconfont.woff?t=1466407979') format('woff'), /* chrome, firefox */
url('font/iconfont.ttf?t=1466407979') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('font/iconfont.svg?t=1466407979#iconfont') format('svg');
/* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: px;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<i class="icon iconfont"></i>
</body>
</html>
demo下载
使用方法：
1、下载需要的图标字体并解压。
2、将下载的四个字体文件替换demo中的文件。
3、替换demo中的css，修改body中的类名即可。
注意点：font文件的引入，URL路径填写是否正确。
二、webfont使用demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
@font-face {
font-family: 'webfont';
src: url('//at.alicdn.com/t/gscufddwstmuc8fr.eot');
/* IE9*/
src: url('//at.alicdn.com/t/gscufddwstmuc8fr.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/gscufddwstmuc8fr.woff') format('woff'), /* chrome、firefox */
url('//at.alicdn.com/t/gscufddwstmuc8fr.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/gscufddwstmuc8fr.svg#思源黑体-极细') format('svg');
/* iOS 4.1- */
}
.web-font {
font-family: "webfont" !important;
font-size: px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: px;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<p class="web-font">人才皆以不问出身，但是不能没有标准。</p>
</body>
</html>
使用方法：
1、将希望改变的字体复制粘贴到webfont 点击生成，然后复制引用线上地址替换原来的@font-face和body中的字体即可。
2、注意命名。
![如何使用阿里巴巴矢量图标库[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)