vue-cli腳手架構(gòu)建的項(xiàng)目中引入iconfont圖標(biāo)方法
圖標(biāo)作為一種裝飾，會(huì)讓頁(yè)面變得好看、簡(jiǎn)潔明了。iconfont是阿里巴巴提供的一個(gè)矢量圖標(biāo)庫(kù)，我們可以在庫(kù)中找到需要的圖標(biāo)，通過下載并引入到項(xiàng)目中就可以直接使用了。
前提：使用vue-cli腳手架構(gòu)建的項(xiàng)目
選擇需要的圖標(biāo)并下載
解壓下載后的文件并找到以下四個(gè)文件，將這四個(gè)文件放入到項(xiàng)目的assets文件夾中（為了以后管理方便，可以在assets文件下面新建了一個(gè)font文件夾，并將圖標(biāo)文件放在該文件夾中）
image.png
image.png
在項(xiàng)目的main.js文件中引入
image.png
查看項(xiàng)目的 package.json 文件中是否有 css-loader 處理器，如果有，忽略這一步，如果沒有，使用 npm install css-loader --save-dev 安裝
大功告成，可以在項(xiàng)目的 vue 文件中通過使用圖標(biāo)的 class 將圖標(biāo)引入到頁(yè)面中
image.png
