WordPress引用阿里巴巴矢量图标库彩色图标

前言

现在大部分博客图标都采用Font Awesome图标库，因为Font Awesome图标库满足了大部分用户的需求了，但做为喜欢花里胡哨的我们是不够的，Font Awesome图标库的图标不仅没有彩色的图标，个性化的图标还有点少！所以对于我们喜欢彩色的菜单图标选择性很少！所以只能引入其他的矢量图标库，今天我就分享一下WordPress引用阿里巴巴矢量图标库的彩色图标。

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

阿里巴巴矢量图标库网址

食用方法

第一步：阿里巴巴矢量图标库官网 —> Github或者新浪微博登录

第二步：然后自己通过搜索框找到自己喜爱的图标并添加至购物车 —> 添加至项目 //没有项目的自己新建项目

第三步：跳转到我的项目 页面（没有跳转的点击–>资源管理–>我的项目）//我的项目自己创建名字

第四步：在 我的项目 页面有一下按钮—>一般选 Symbol

第五步：点击 –> 查看在线链接（没有的的话可以点击生成链接） —>点此复制代码（代码例如下面）

//at.alicdn.com/t/font_3124665_3tfqhtrr2zq.js

第六步：引入JS代码

在当前主题设置—>自定义底部代码—>添加下面代码:(下面src=”这里是上面的JS代码，自行替换 “)

<script src="//at.alicdn.com/t/font_3124665_3tfqhtrr2zq.jss"></script>

使用图标

在已经添加到你项目中查找图标并复制图标代码，然后按照下面的格式替换href="#iconxxx"中的图标代码，将代码插入到你需要显示图标的地方！

<svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#iconziyuan"></use></svg> 【动态】

<svg class="icon" aria-hidden="true"><use xlink:href="#iconxxx"></use></svg> 【静态】

二、上面的 iconziyuan 对应图标代码 //就是图库下面的图标名称