方法一（推薦）

1. 進入Iconfont(https://www.iconfont.cn/)
2. 找到自己的項目->更多操作->編輯項目

3. 修改前綴，之后用的時候就可以icon-al-xxxxx(可以修改自己習(xí)慣和喜歡的樣式)

4. 點擊Font class，點擊查看在線鏈接，復(fù)制下面代碼

5. 進入vue根目錄的Public/index.html，打開文件，將下列代碼添加進去

<link rel="stylesheet" type="text/css" href="剛才復(fù)制的代碼">

6. 之后就可以復(fù)制代碼，然后像使用elementUI里面一樣使用啦。（例如：icon=“icon-al-yanzhengma2” class=“icon-al-syanzhengma2”），如果沒有顯示，重啟一下項目 npm run serve 。

方法二

1. 進入Iconfont(https://www.iconfont.cn/)
2. 找到自己的項目->更多操作->編輯項目

3. 修改前綴，之后用的時候就可以icon-al-xxxxx(可以修改自己習(xí)慣和喜歡的樣式)

4. 將icon文件下載到本地

5. 將下載下來的文件解壓后，找到目錄下的iconfont.css文件，然后做如下修改

6. 將下列iconfoot文件拷貝到項目里面就可以了

8. 在vue的Main.js 里面引入iconfont，在elementUI的css之前引入，我放到之后引入，elementUI的icon就不顯示了

9. 之后就可以復(fù)制代碼，然后像使用elementUI里面一樣使用啦。（例如：icon=“icon-al-yanzhengma2” class=“icon-al-syanzhengma2”），如果沒有顯示，重啟一下項目 npm run serve 。

參考：https://www.jianshu.com/p/a6b54662753b

總結(jié)

以上是生活随笔為你收集整理的vue引用阿里云iconfont使用icon图标（elementUI图标太少）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。