簡介

現在很多的 wordpress 主題模板都自帶 Font Awesome 圖標庫，但是這個圖標庫的樣式太醜了，80猿就分享一下 WordPress 引用阿里巴巴矢量圖標庫的彩色圖標的方法，其實很簡單，只需要添加圖標然後放入一個阿里矢量圖標 js 文件就可以了。

教學

第一步：打開阿里巴巴矢量圖標庫網址

第二步：登入或者註冊賬號

第三步：登入之後返回首頁搜索需要的圖標-如下圖

第四步：搜索框找到自己要的圖標並添加至購物車

第五步：添加購物車之後—添加至項目

如果沒有項目的自己新建一個項目即可 不懂的可根據下圖演示來

第六步：選擇Symbol格式，然後點擊：暫無代碼，點擊生成

第七步：把生成的代碼引入至主題

添加路徑：子比主題後台—》自定義代碼—》自定義底部 HTML 代碼—》添加剛複製的 js 格式代碼
如果後加入的一些圖標是需要在阿里圖標庫重新生成一下代碼的

<script src="//at.alicdn.com/t/font_2101442_j448m0ggtp.js"></script>

第八步 : 添加css样式

在當前主題設置 –> 自定義CSS代碼 或者目錄下的 header.php 文件中適當位置添加以下代碼:（不適用的，自行調整寬度）

<style type="text/css">
.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>

第九步 : 添加彩色圖標

一、在WordPress後台—> 外觀 —> 菜單 —> 導航標簽 添加以下代碼:

<svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#你的圖標代碼"></use></svg> 文章分類

1. 代碼中的【加入你的圖標代碼】就是妳在阿里巴巴矢量圖庫複製的 ico 代碼：
2. 在WordPress 後台—> 外觀 —> 菜單 —> 文字前 添加上面代碼:保存即可

配合一行代碼讓你網站菜單圖標旋轉起來

在自己網站主題的CSS中加入以下代碼：

.fa-spin {
    animation: 2s linear 0s normal none infinite running fa-spin;
}

在WordPress後台，將“fa-spin”添加到菜單中要旋轉的圖標代碼的“class”中。

<svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#iconziyuan"></use></svg> 文章分類

注：主題如果自帶CSS代碼，那麼只需添加 JS代碼 和 導航標簽 即可！！！