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

前言

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

效果展示

简介

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

开始教程

1. 进入官网

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

 2. 添加项目

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

3. 获取JS代码

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

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

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

4. 调用代码

在 主题文件底部HTML代码 里面添加以下JS代码：

<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> 首页

原文链接：WordPress引用阿里巴巴矢量图标库彩色图标-天域博客