OneNav 導(dǎo)航主題一直使用 FontAwesome 圖標(biāo)，與這個(gè)相比阿里的 Iconfont 有絕對(duì)的優(yōu)勢(shì)：目前 Iconfont 大概有七百多萬(wàn)個(gè)，而 FontAwesome 只有600多，讓你有更多的選擇。

按需使用

FontAwesome不論你使用幾個(gè)圖標(biāo)字體，都需要完整加載字體庫(kù)，而Iconfont可以按你所需定制圖標(biāo)字體庫(kù)，并且可以根據(jù)你的需要隨時(shí)更改，可以直接將生成的字體鏈接添加到主題中。

介紹完阿里巴巴矢量圖標(biāo)庫(kù)的優(yōu)勢(shì)，下面開(kāi)始具體使用方法：

一、首先登錄阿里巴巴矢量圖標(biāo)庫(kù)

阿里巴巴矢量圖標(biāo)庫(kù)

目前只支持GitHub 和新浪微博賬號(hào)授權(quán)登錄。

二、新建圖標(biāo)庫(kù)項(xiàng)目

登錄后，點(diǎn)擊上面菜單中的圖標(biāo)管理→我的項(xiàng)目，點(diǎn)新建項(xiàng)目圖標(biāo)新建一個(gè)圖標(biāo)項(xiàng)目：

在彈出的窗口中輸入相關(guān)信息，項(xiàng)目名稱任意。

需要注意（設(shè)置后不顯示基本都是下面這步錯(cuò)了）：???

三、向圖標(biāo)項(xiàng)目中添加圖標(biāo)

點(diǎn)擊菜單上的圖標(biāo)庫(kù)，進(jìn)入一個(gè)圖標(biāo)庫(kù)。

用鼠標(biāo)選擇一個(gè)圖標(biāo)并點(diǎn)擊上面的購(gòu)物車圖標(biāo)，將圖標(biāo)添加到臨購(gòu)物車中，如圖：

已添加過(guò)的圖標(biāo)，會(huì)有個(gè)虛線框提示，右上角購(gòu)物車圖標(biāo)上的數(shù)字，是在購(gòu)物車中待添加到項(xiàng)目中的圖標(biāo)個(gè)數(shù)。

選擇添加完圖標(biāo)，點(diǎn)擊右上角的購(gòu)物車圖標(biāo)，將添加在購(gòu)物車中的圖標(biāo)添加到相應(yīng)該項(xiàng)目中：

點(diǎn)擊生成代碼：(以后每次添加新圖標(biāo)都要重新生成代碼)

四、加載外鏈圖標(biāo)字體庫(kù)

復(fù)制代碼：

進(jìn)入WebStack Pro主題設(shè)置選項(xiàng)→其他功能選項(xiàng)卡，將復(fù)制的圖標(biāo)字體庫(kù)鏈接添加到主題選項(xiàng)中：

最后不要忘記保存一下主題設(shè)置。外鏈字體庫(kù)支持https。

如果再次添加圖標(biāo)，重復(fù)上面的步驟。

五、給菜單項(xiàng)目添加圖標(biāo)字體

添加圖標(biāo)字體需要將菜單高級(jí)屬性打開(kāi)，登錄WP后臺(tái)→外觀→菜單，進(jìn)入菜單編輯管理頁(yè)面，打開(kāi)右上角的”顯示選項(xiàng)“，勾選其中全部的“CSS類”，如圖：

返回已建好的圖標(biāo)字體庫(kù)頁(yè)面，用鼠標(biāo)復(fù)制圖標(biāo)代碼，例如：io-zhuti

最后不要忘記保存菜單。

正常主題只有菜單可以添加圖標(biāo)字體，漂亮的圖標(biāo)，會(huì)吸引瀏覽者去點(diǎn)擊。如果動(dòng)手能力強(qiáng)，你也可以修改主題模板文件，替換添加主題默認(rèn)的圖標(biāo)字體。

其中Unicode(16進(jìn)制)代碼，比如下圖這個(gè)圖標(biāo)的Unicode代碼 e636，就與主題默認(rèn)的新浪微博的圖標(biāo)相同隨便改一個(gè)，但必須是字母e開(kāi)頭6以后的數(shù)字四個(gè)數(shù)字和字母組合，如圖：

不要把胡亂地把一些圖標(biāo)都弄到字庫(kù)中項(xiàng)目中，使用哪個(gè)就添加哪個(gè)，不然會(huì)引起更多的字體名稱沖突，而且會(huì)在一定程度上影響加載速度。