如何在 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 方式使用字體圖示，可惜可讀性太差，只看代碼也猜不出圖示是啥
- 專案中需要些什么圖示也許多方角色都不知道，只有在開發程序中遇到圖示，才去搜索下載，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502751.html
標籤：其他
上一篇：正則使用場景