阿里團隊是讓人非常佩服的團隊，不僅僅是技術，更是理念。
字體圖標是開發web常用的元素，阿里為前端開發人員准備了大量的，而且免費的字體圖標庫。現在就記錄下如何使用阿里字體圖標庫的詳細步驟。
1.打開阿里字體圖標官方網頁
2.在首頁的搜索框中輸入你想找的字體圖標的關鍵字
注意：阿里的搜索框既支持 輸入漢字作為關鍵字，也支持輸入漢語拼音，還支持輸入英文單詞檢索。如下圖所示，我想找主頁的字體圖標，既可以輸入“主頁”來搜索，也可以輸入“home” 
搜索結果如下圖：
3.選擇你所需要的字體圖標
當你找到自己所需要的字體圖標時，你只需要把鼠標光標放在該圖標的選項上，此時會出現一個遮蓋層，其中有3個選項，點擊第一個顯示購物車外觀的選項。如下圖所示：
此時，你講在頁面的右上角“購物車”圖標中，看到已經存入1個貨物。如下圖所示：
4.添加到項目
首先說明一點，這里的項目不是指你當前開發的web項目，而是阿里把沒一次你要打包使用字體圖標的請求，當做一個項目來處理。做這一步的目的是為了接下來在你自己的web項目中，使用你選中的這些字體圖標。具體操作如下圖：
先用鼠標點擊頁面右上角的購物車圖標，如圖：
然后你將看到從頁面右側彈出一個側邊框，里邊展示出你所選中的3個字體圖標，下面還有3個按鈕選項。如下圖所示
點擊“添加至項目”按鈕。此時如果沒有登錄，系統會提示你登錄，如下圖所示，有3種登錄可用。
我使用的github賬號登錄。
登錄成功后，在此點擊頁面右上角“購物車”，你將看到如下圖所示的界面，讓我們選擇一個已有的項目，或者新建一個項目，來保存此次選中的字體圖標。
我們點擊右邊的“+”號按鈕，新建1個項目，來保存這幾個字體圖標。我們新建一個test1的項目，點擊確定，來保存之。如下圖所示，
5.生成字體圖標的css樣式文件
第4步操作完成后，你將看到如下的界面
如圖所示，你需要先選中“Font class”選項，因為我們要通過頁面標簽的class屬性，來使用字體圖標。
然后用鼠標點擊下面紅色的超鏈接“暫無代碼，點此生成”。這樣就會給我們生成這幾個字體圖標的css樣式文件的下載鏈接地址。如圖所示：
如圖所示，點擊復制此代碼，把地址在瀏覽器中打開，就能看到生成的代碼了。如下圖所示：
6.在自己的web項目中使用字體圖標
首先，你需要把第5步最后頁面里展示的css代碼全選，然后ctrl + c復制出來。
然后在你自己的項目中創建一個.css文件。比如我這里創建了一個iconfont.css文件，然后把這些代碼粘貼進去，並保存。如圖： 
當然，如果你的是微信小程序項目，你就創建一個.wxss文件保存之。
大功告成，你可以在項目里使用了。比如：
我要在頁面上顯示“首頁”的字體圖標，代碼如下：
<span class="iconfont icon-fenxiang">聯系我們</span>
其中，iconfont類是基礎類，使用任何圖標都需要導入此類，icon-fenxiang類是具體到某1個圖標的類。
運行效果如下
搞定！