前言
為什么寫這篇文章？
Font 無論是 v4 還是 v5 圖標都有一些局限性。因此不少小伙伴想到了使用阿里 圖標。然而很多小伙伴并不是前端這個專業，可能對使用圖標存在一定的問題。
因此創作這篇水文，幫助小伙伴解決無法引入阿里 圖標的問題。
什么人能夠使用？
理論上來說任何主題任何驅動都可以。只要你的網頁還是 HTML+CSS。
引入并不是什么難事，這篇文章只是給小白看的，有相關經驗或者大佬可以直接關掉這篇水文了。
引入前的準備
能夠登錄阿里
認識漢字及部分單詞（、class等）
具備一定的前端知識：了解什么是標簽
具備一定的前端知識：能夠使用開發者工具
具備一定的前端知識：能夠找到相應的標簽
具備一定的前端知識：明白css的語法
其他說明
此教程理論上可以在任意主題（需自己具備一定的能力）使用，此主題只以 （版本：2.3.5）主題為例。
建立項目
進入阿里 尋找你想要添加的圖標，并且添加到項目。
找到你想添加的圖標（如果你不會找，可以直接關掉此文了。）
將你想要添加的圖標點擊“添加入庫”按鈕，也就是圖中圈起來的圖標。
添加至項目
點擊右上角小購物車圖標。這里會看到你剛剛添加的所有圖標
接下來就是為你的圖標創建一個項目，名稱隨意。創建完成后你將看到如下頁面
生成在線鏈接
（font class方式）點擊 Font class 按鈕然后生成鏈接。
如果使用svg，那么請點擊，然后生成鏈接。
查看鏈接
點擊鏈接會看到一些 css 代碼。將鼠標下拉會看到剛才你添加的樣式。
引入字體及樣式
引入字體樣式其實就是把剛才的鏈接引入到博客中，可以直接使用阿里的鏈接，也可以下載下來。為了方便方便修改，我建議下載下來放到本地。
同樣以 主題為例：
下載
右鍵另存為即可。路徑選擇\\\\css\
引入文件
不同主題引入外部 css/js 的方法都不相同阿里圖標可以改顏色嗎，請參考你所使用主題引入外部樣式的設置。
如果你不想自己創建而是想直接使用博主的，那么可以直接把鏈接換成：@/Hexo/css/.min.css。
圖標庫預覽：
如果使用svg
如果使用svg圖標，那么需要在css樣式表中加入如下樣式。如果使用，那么可以無視這一步
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}開始使用
上述步驟全部完成后，那么接下來可以使用小圖標了。
個人信息欄的小圖標–font字體方式
這里直接寫阿里提供的樣式即可。
social:
iconfont icon-bilibili: https://www.bilibili.com
小圖標如果你覺得小，可以自行修改。
.icon-bilibili:before {
content: "\e600";
/* 修改顏色 */
color: blue;
/* 修改大小 */
font-size: 24px;
}這樣修改會導致所有這個圖標的大小都會變動。建議的方式是重新寫一個 css，為其添加規則。設置時只需要多加一個 class 即可例如：
.icon-bilibili:before {
content: "\e600";
}
/* 卡片處小圖標 */
.card_icon {
/* 修改顏色 */
color: blue;
/* 修改大小 */
font-size: 24px;
}
設置時的方法：
social:
iconfont icon-bilibili card_icon: https://www.bilibili.com個人信息欄的小圖標–svg方式
svg也稱多色圖標，由于不是通過類名，而是使用了svg標簽，因此需要通過腳本的方式動態插入。例如：
$(".card-info-social-icons").append(
''
);其中兩個空分別表示地址，例如,另外一個為圖標名，例如#icon-QQ，名字根據你自己庫來寫，不是隨便寫的。
標題美化處的修改
主題的標題標簽前有一個圖標，如何為其更改為阿里 呢？
通過開發者工具我們可以看到主題為前邊小圖標的樣式：
因此我們改動起來也很簡單，只需要在剛才我們的.css文件中覆蓋這個樣式即可。
#article-container h1:before,
#article-container h2:before,
#article-container h3:before,
#article-container h4:before,
#article-container h5:before,
#article-container h6:before {
font-family: "iconfont";
content: "\e6a0";
}此時就能看到圖標已經發生了變化。
這里解釋下代碼，方便大家自行決策如何修改。
font-是必須寫的，因為作者的代碼只寫了 ，因此需要覆蓋他。
可以不在 css 中寫，這樣可以在配置文件里定義內容。如果寫了，會導致配置文件的設置失效。顏色設置同理.
其他修改
不管是什么主題,不管是什么樣式.只要你想使用阿里的圖標,必須改變其標簽的字體為,接下來可以用偽類方式,也可以使用 class 方式。
文章中使用svg也很簡單阿里圖標可以改顏色嗎，首先需要確保全局引用了js。如果沒有，在文中局部引入也是可以的。
接下來只需要在需要的地方插入svg標簽即可。
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx">use>
svg>最后
如果你遇到了如下問題,請向上查找解決方案.
修改圖標大小及顏色
圖標不顯示(無效果)
這種原因很多種,但如果你稍有常識就不會遇到.
不知道在哪改
在你創建的 css 文件中.