vue前端專案中使用阿里向量圖示（Font class）
阿新 • • 發佈：2020-10-19
一、登入阿里巴巴向量圖示庫
二、點選圖示庫
三、選擇圖示
選擇圖示後，會進入該型別的圖示庫，然後滑鼠劃上想選擇的那個圖示，會有三個選擇，分別為“新增入庫”， “收藏”和“下載”， 這裡我們點選“新增入庫”
四、加入購物車
點選“新增入庫後”，我們會在頁面的右上角看到購物車的圖示，然後點選進入購物車
點選“新增至專案”，選擇好專案名稱後點擊“確定”，我們即可在專案中看到該圖示
五、 使用
1 進入專案後，點選“Font class”,然後點選下載至本地
2 然後解壓到資料夾
3 將上面藍框框住的檔案放到你正在寫的專案中（放到src/assets目錄下，因為是靜態資源）
4 在main.js檔案內全域性引入 阿里雲字型圖示 css，這裡一定要注意路徑要正確，要和你上面存放檔案的位置對上
5 為避免出現圖示方框的情況，需要對font進行初始化，在全域性樣式檔案中加入如下程式碼
6 在專案中，滑鼠劃上你要使用的圖示，然後點選“複製程式碼”，即可複製該圖示的類，然後在你的專案中使用
7 還可以給該圖示新增樣式，目前可以新增顏色和字型大小兩種樣式
六、注意事項
該方法是單色圖示，不支援多色圖示，簡單來說，你加入的圖示顏色很豐富，但是使用到專案中卻只能顯示黑色，你可用通過上面的新增樣式來簡單的改變顏色和字型大小