首先解釋一下彩色圖標(biāo)是什么？又或者我們可以把彩色圖標(biāo)用在什么地方：

正如我們的網(wǎng)站所示：首頁(yè)頂部菜單，文章分類(lèi)菜單的彩色圖標(biāo)就是引用的字體圖標(biāo)。當(dāng)然我是將字體圖標(biāo)下載下來(lái)引用然后修改css控制變色的，不算真正的彩色字體圖標(biāo)。下面我就來(lái)介紹一下彩色圖標(biāo)的運(yùn)用：

使用步驟

1.登錄阿里圖標(biāo)：https://www.，如果沒(méi)有賬號(hào)先注冊(cè)，創(chuàng)建一個(gè)項(xiàng)目，項(xiàng)目名稱隨意，比如下圖所示：

2.創(chuàng)建好項(xiàng)目以后，搜索自己需要的圖標(biāo)，添加入庫(kù)（圖標(biāo)上的購(gòu)物車(chē)），或者上傳自己的圖標(biāo)入庫(kù)。

3.添加完成后需要添加到項(xiàng)目，可以選擇右上角的購(gòu)物車(chē)圖標(biāo)，點(diǎn)擊添加至項(xiàng)目。

4.找到我的項(xiàng)目，可以看到我們添加的圖標(biāo)

5.引入項(xiàng)目下面生成的 symbol 代碼添加到7b2主題-常規(guī)設(shè)置-頭部HTML標(biāo)簽中（每次添加更新圖標(biāo)時(shí)都要重新點(diǎn)擊更新代碼并替換）

<script src="你的阿里圖庫(kù)js代碼"></script>

6.加入通用 CSS 代碼到7b2的子主題style.css中

/*阿里巴巴圖標(biāo)*/
svg.icon{
	width:1em;
	height:1em;
	margin-bottom:-2px;
}

7.挑選相應(yīng)圖標(biāo)并獲取類(lèi)名，添加到后臺(tái)-外觀-菜單中

<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>

8.#icon-xxx為你添加的項(xiàng)目圖標(biāo)名（#后邊的代碼）

9.大功告成請(qǐng)查看，記得清理一下緩存，有CDN的刷新一下