Web前端开发资源网做设计的应该会知道“阿里巴巴矢量图标库”这个网站，你可以上传自己设计的图标，也可以下载别人分享的图标。
作为前端，我们也可以更好的利用它，实现网站图标的美化。
首先找到你需要的图标并加入库：三个按钮分别是 加入库、加入收藏和下载
点击下载按钮后会弹出一个窗口，你可以调整任意颜色和尺寸，可以下载 SVG、AI和PNG3种格式。
点击右上角图标，打开库，点击“下载代码”下载字体包，你也可以先添加至项目，然后在“资源管理”——“我的项目”里面，点击“下载到本地”进行下载。
点击“添加至项目”，你可以添加项目名称，点击“确定”保存到我的项目。
在我的项目中，你可以生成在线链接，这里给出3种方式：Unicode、Font class 和 Symbol。
点击“下载至本地”会下载一个包，解压后就可以引入使用了。
浏览器打开“demo_xxx.html”可以看到图标的使用方法，有三种引用方式：
font-class引用：
首先在头部引入 iconfont.css 文件
<link rel="stylesheet" type="text/css" href="./iconfont.css">
然后在 html 代码中使用相应的类名应用于页面
<i class="iconfont icon-xxx"></i>
"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
unicode引用：
首先拷贝项目生成的 font-face
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}定义使用 iconfont 的样式
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}然后挑选相应图标并获取字体编码，应用于页面
<i class="iconfont">3</i>
IconFont 图标
首先引入项目下面生成的symbol代码
<script src="./iconfont.js"></script>
加入通用css代码（引入一次就行）
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>然后挑选相应图标并获取类名，应用于页面
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>
使用的时候只需要保留一种方式所需要的文件和字体文件，其他的删掉就可以了。
怎么样？是不是很方便呢？
未经允许不得转载：Web前端开发资源网 » 阿里巴巴矢量图标库 iconfont 的使用方法
推荐阅读：