如何在 IconFont 上獲取圖標資源 阿裡巴巴矢量圖標庫網站（https://www.iconfont.cn/）上提供了非常豐富的圖標資源，包括 SVG、AI、PNG、字體圖標等格式。使用該網站提供的圖標，需要在該網站上註冊賬號並登錄。 1 搜索圖標 登錄成功後，在首頁的搜索框中搜索關鍵字，例如 ...
如何在 IconFont 上獲取圖標資源
阿裡巴巴矢量圖標庫網站（https://www.iconfont.cn/）上提供了非常豐富的圖標資源，包括 SVG、AI、PNG、字體圖標等格式。使用該網站提供的圖標，需要在該網站上註冊賬號並登錄。
1 搜索圖標
登錄成功後，在首頁的搜索框中搜索關鍵字，例如搜索一個手機的圖標：
輸入'mobile' 後回車，可以看到搜索結果。可以在搜索結果上方選擇色系、風格等，對結果進行過濾。
在前端開發實戰中，最常使用的是 SVG、PNG、字體圖標三種方式。使用 PNG 圖標，找到對應的圖標後，直接點擊 ”PNG 下載“就行。下麵著重談談使用 SVG 和字體圖標。
2 使用 SVG 圖標
找到要使用的圖標，滑鼠移上去會圖標上的懸浮層出現三個按鈕，點擊最下麵的下載按鈕：
點擊下載按鈕後，會彈窗顯示該圖標的信息。
可以在這個彈窗中修改圖標的顏色、大小屬性。
2.1 方式一：直接下載
與使用PNG圖標格式圖標一樣，點擊彈窗底部的 "SVG 下載" 按鈕就行，將下載下來的 ”.svg“ 文件拷貝到工程中即可。
2.2 方式二：複製 SVG 代碼
svg 文件本質上是一個 xml 文件。首先在項目中創建一個svg文件，如：'icon-mobile.svg'。打開該文件，在該文件中添加 xml 的頭部：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
點擊彈窗中的 ”複製SVG代碼“按鈕，然後在 icon-mobile.svg 文件中粘貼即可。
我個人的習慣是：沒有 SVG 圖標時，第一次點擊“SVG 下載”，下載svg文件。之後就手動創建 SVG 文件， ”複製SVG代碼“。
3 使用字體圖標
3.1 查找並添加圖標到購物車
前面已經講過，在搜索到的圖標列表中，滑鼠移動到圖標上會出現一個懸浮層，懸浮層有三個按鈕，點擊第一個購物車圖形的按鈕，將圖標添加到購物車中：
點擊後，懸浮層中的購物車按鈕會變成實心按鈕，表明添加成功。然後依次查找其他需要使用的圖標，同樣的方式添加到購物車。
3.2 方式一：下載代碼
把需要使用的圖標全部添加到購物車後，點擊頁面右上角的購物車按鈕：
點擊後會在頁面右側滑出購物車面板，點擊下方的”下載代碼“按鈕，即可獲得字體圖標文件。
3.3 方式二：添加至項目
在上面右側滑出的購物車面板中，點擊”添加至項目“按鈕，會在右下方出現項目列表。如果項目已經存在，則選中對應項目後點擊”確定“按鈕。如果項目不存在，點擊右下方區域的右上角的加號圖標：
填寫項目名稱後，點擊”確定“按鈕，進入到項目界面。
在項目管理界面中，滑鼠移動到每個圖標上，都會在圖標上出現浮動層，該浮層有四個操作按鈕：
我嘗試了點擊編輯按鈕，我想編輯圖標的類名，但沒有修改成功。故只能保留它預設的名稱。點擊上方的”下載至本地“按鈕，便可得到和方式一相同的字體圖標文件。
4 個人心得
在真實的項目開發中，我一般都使用 svg 圖標。使用字體圖標只有兩種情況：一種情況是自己寫demo玩玩，第二種情況便是有人提供現成的iconfont資源。我之所以不在項目開發中通過IconFont網站資源使用字體圖標，原因如下：
- 該網站獲取的字體圖標 class 命名五花八門，極大可能不符合項目規範；
- 雖然可以在下載後的字體圖標文件中手動更新 class 命名，但項目是持續迭代的，迭代過程中需要新圖標，你如何疊加進去；
- 可以採用 Unicode 方式使用字體圖標，可惜可讀性太差，只看代碼也猜不出圖標是啥
- 項目中需要些什麼圖標也許多方角色都不知道，只有在開發過程中遇到圖標，才去搜索下載。
