阿里圖標(biāo)庫允許自定義圖標(biāo)，上面有非常豐富的圖標(biāo)。本教程展示如何使用他家的圖標(biāo)作為菜單圖標(biāo)。
使用普通圖標(biāo)
創(chuàng)建項(xiàng)目
登錄阿里圖標(biāo)
創(chuàng)建一個(gè)項(xiàng)目
項(xiàng)目名稱隨意，前綴可以使用默認(rèn)的icon
創(chuàng)建好項(xiàng)目以后，就可以去添加自己需要的圖標(biāo)了，找打圖標(biāo)，點(diǎn)擊添加到購物車
添加完成后需要添加到項(xiàng)目，可以選擇右上角的購物車圖標(biāo)，點(diǎn)擊添加至項(xiàng)目。
找到我的項(xiàng)目，可以看到我們添加的圖標(biāo)
選擇Font class，生成一個(gè)鏈接，復(fù)制這個(gè)鏈接，就可以拿到WordPress里面使用了。
引入圖標(biāo)
WordPress里面引入這個(gè)css文件，很多主題能夠引入外部鏈接，以CorePress主題為例
庫.png)
直接輸入代碼引用，其中href里面的網(wǎng)址為你自己的項(xiàng)目庫
<link rel="stylesheet" type="text/css" media="all">
引入完成后，在WordPress菜單里面，勾選CSS類，選擇菜單
在css類里面添加css字體圖標(biāo)，其中的icon為前綴，后面的iconwordpress為圖標(biāo)名稱，每個(gè)圖標(biāo)名稱都不一樣。
添加成功后，應(yīng)該沒問題了，不過圖標(biāo)是黑白的，并不是彩色的。
使用彩色圖標(biāo)
彩色圖標(biāo)為svg圖，無需再按照上面的方法引入css，使用方法如下
添加css
自己添加到主題的style.css，或者WordPress自定義里面的額外css中。
下面代碼
其中width為圖標(biāo)寬度，height圖標(biāo)高度，根據(jù)自己需要設(shè)置大小，默認(rèn)是18px。
.icon {
width: 18px; height: 18px;
vertical-align: -3px;
fill: currentColor;
overflow: hidden;
}
引入js
在圖標(biāo)庫里面選擇Symbol，復(fù)制這個(gè)js的地址
引入js，引入js的方法多樣，不再贅述。
庫-1.png)
其中src里面的地址為你自己的js地址
<script type="text/javascript" src="http://at.alicdn.com/t/font_111258_rg8g2e669a.js"></script>
找到菜單，在菜單名稱填入如下代碼
其中#iconanquan為圖標(biāo)名稱
<svg class="icon" aria-hidden="true"><use xlink:href="#iconanquan"></use></svg>
設(shè)置好以后，圖標(biāo)就是彩色的了。
