前言

阿里巴巴矢量图标库是由阿里巴巴体验团队倾力打造的中国第一个最大且功能最全的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能，是设计师和前端开发的便捷工具。在这里你可以找到各种各样的图标并免费使用。

效果展示

开始教程

1. 进入官网

阿里巴巴矢量图标库网址： https://www.iconfont.cn，选择- Github/新浪微博/微信登录。

2. 添加项目

然后自己通过搜索框找到自己喜爱的图标并 添加至购物车 – 添加至项目，没有项目的自己新建项目。

3. 获取JS代码

点击顶部菜单栏进入 资源管理 – 我的项目 页面，1️⃣ 点击 Font class 按钮。

点击 查看在线链接，没有的的话可以点击生成链接，，点击 复制代码，如上图：

//at.alicdn.com/t/c/font_3800775_xxxxxxxxxxx.css

4. 调用代码

在 子比主题后台 – 自定义代码 – 自定义底部HTML代码 里面添加以下代码：

<!--引用阿里巴巴素材库 天域博客 www.tianyubk.com --> 
<script src="这里填写阿里巴巴素材库复制的代码"></script>

5. 如何使用

在需要引用图标的 svg 代码 中添加 href 代码，替换其中的图标代码 #iconziyuan，例如本站导航栏：

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shenghuo"></use></svg> 首页

还可以让图标旋转起来，在 class 内添加 fa-spin 例如：

<svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#icon-shenghuo"></use></svg> 首页

默认： 首页 — 文章资讯 — 源码基地
旋转： 首页 — 文章资讯 — 源码基地

OK，教程结束，本教程不仅限于WordPress，其它网站也是同理，快去试试吧！