阿里巴巴矢量图标库(iconfont)使用教程

　　进入iconfont网站（https://www.iconfont.cn/），登录账号，点击“资源管理-我的项目”，新建一个项目，项目名称可随便填写。

　　回到iconfont网站首页，在搜索框中输入图标名称，中英文均可（如：编辑/edit、删除/delete），鼠标移到图标上方，点击添加入库，然后将库中图标添加至项目即可。

　　点击“资源管理-我的项目”，点击下载至本地，相关的文件会全部打包下载，可以离线使用。

　　将下载的.zip文件解压，可以打开demo_index.html查看演示效果，项目只需引入其中的iconfont.css（Font class）或iconfont.js（Symbol）即可使用图标。

　　说明：Font class不支持多色图标，Symbol支持多色图标，但Symbol的缺点是兼容性较差（只支持IE9+及现代浏览器），且性能一般（还不如png），可根据需求选择。

<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>iconfont</title>

    <!-- 若只使用Font class方式显示图标，只需引入iconfont.css即可，无需引入iconfont.js -->
    <!-- 重要提醒：必须设置rel属性，否则无法显示图标。 -->
    <link rel="stylesheet" href="./iconfont.css">

    <!-- 若只使用Symbol方式显示图标，只需引入iconfont.js即可，无需引入iconfont.css -->
    <script src="./iconfont.js"></script>
    <style>.icon{width:1em;height:1em;vertical-align:-.15em;fill:currentColor;overflow:hidden}</style>

</head>
<body>

<!-- 使用Font class方式显示图标 -->
<span class="iconfont icon-edit"></span>

<!-- 使用Symbol方式显示图标 -->
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-edit-twotone"></use>
</svg>

</body>
</html>