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 圖標