iconfont 在專案中使用阿里icon

在專案中使用icon是前端專案經常遇到的。一般會選擇用圖片，適合為數不多，或者設計圖示複雜的情況，而現在越來越多的設計與前端會選擇iconfont，至於iconfont是什麼如何製作，後期會再出一篇文章，讓設計與開發輕鬆自制iconfont。 阿里向量圖示庫，截止寫這篇文章的時候，已經有三百多萬的圖示，各種圖形、風格，幾乎專案想要的圖示都可以找到，而且同一個圖示可以選擇顏色，做了幾個專案，都是在阿里向量相簿找到合適的，設計小姐姐再也不用辛苦畫了【撒花】 接下來，就來介紹一下專案中如何使用阿里的iconfont圖示庫，先看一下官網 www.iconfont.cn/?spm=a313x.… 開啟官網 在home頁搜尋你想要的圖示，

點選圖示，加入購物車

點開購物車，新增至專案，沒有專案可以新建專案，

如何在專案中使用：

在專案頁，可以看到當前專案的所有圖示。而開發專案要使用這些圖示，可以選擇線上引入，或者下載到本地。一般大部分專案都會選擇下載到本地吧，因為iconfont在一些公司內網訪問經常會受到極大限制。 方法一：直接引入，複製程式碼，新增到專案的css檔案中即可

方法二： 點選下載到本地，下載icon檔案，放入專案中

下載之後，開啟下載的icon包，可以看到：

其中除了demo_*.html、demo.css這三個檔案，其他的檔案就是我們需要的。 拷貝icon檔案放入到某個目錄下，比如vue-cli3.0專案，我選擇的是放入到assets/icon專案下，存放所有靜態資源的地方。 使用，不管是方法一引入還是方法二，使用方法都是一樣的 在css檔案中新增複製的程式碼，在html中 其中，html標籤可以隨意選擇，一般會選擇i，iconfont 是通用class， ed-icon-icon-test 則代表了具體的圖示，這個值可以從這邊複製。選擇【Font calss】或者【Symbol】，複製程式碼。class名在引入之前都可以自定義名稱

或者你也可以通過unicode來定義圖示，一般是選擇icon class比較習慣

如何在vue 專案中使用iconfont 圖示