Zibll子比主题 | 全站使用阿里巴巴 Iconfont 图标的详细教程

现在很多 WordPress 网站主题模板自带的图标都是 Font Awesome 图标库，因为 Font Awesome 图标库能够满足大部分用户的需求。Zibll子比主题也是一样，集成了 v4 版本的 Font Awesome 图标库，可以在全站使用 Font Awesome 图标而无需任何插件。

Zibll子比主题使用 Font Awesome 图标教程十分简单，仅需两步：

第一步：打开 Font Awesome 官网，找到你想要插入的图标代码并复制，如下图。

●Font Awesome官网：https://fontawesome.com/versions
●Font Awesome中文网：https://fontawesome.com.cn/v4/icons

第二步：在 WordPress 网站任意支持HTML代码的位置粘贴图标代码即可，如下图。

但是， Font Awesome 图标库的个性化图标选择比较少，并且图标没有彩色。所以，今天十一张（www.11zhang.com）站长就分享一下在 WordPress 网站引用阿里巴巴 Iconfont 矢量图标库的方法。

详细教程

Iconfont 是一个老牌的图标库，阿里巴巴旗下的，图标资源十分丰富且免费，获取方式也十分简单。

1.新建Iconfont项目

首先进入 Iconfont 阿里图库网站，注册并登录（支持GitHub、微博和微信第三方账号登录），如下图。

https://www.iconfont.cn

然后，我们可以在首页使用搜索功能，找到自己需要的图标加入购物车（添加入库），再把购物车的图标加入到项目，如下面。

PS：如果还未创建项目，那就新建一个就是了，步骤如下：

2.网站集成

目前，Iconfont 官网提供三种集成方式：Unicode、class、Symbol，这三种集成方式各有优劣势，具体请查看官方教程。

官方教程：https://www.iconfont.cn/help/detail?spm=a313x.help_detail.i3.49.7e003a81pAJYxv&helptype=code

十一张（www.11zhang.com）站长推荐使用 Symbol 的方式集成到 WordPress 网站中，当然你也可以按照官方的教程使用其它方式集成。

先将刚刚新建的项目生成 Symbol 接入链接，然后复制代码，如下图。

再将以下代码中的链接替换为您刚刚复制的 Symbol 链接，然后进入Zibll子比主题设置 - 自定义代码 - 自定义底部HTML代码，粘贴后保存主题设置，如下图。

<script src="链接"></script>

例如：
<script src="//at.alicdn.com/t/font_1706672_oa811wlg9gl.js"></script>

这样 WordPress 网站就集成 Iconfont 图标了，简单吧！接下来就可以使用 Iconfont 图标了！

3.使用 Iconfont 图标

在你新建的项目中复制图标代码，然后按照下面的格式替换“图标代码”：

<svg class="icon" aria-hidden="true"><use xlink:href="#图标代码"></use></svg>

例如：
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-weibo1"></use></svg>
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-Bzhan"></use></svg>

再将代码插入到你需要显示图标的地方即可，如下图。

效果：

您学废了吗？