目錄

?編輯?

?前言

正篇

一、在官網下載icon圖標

二、Vue添加iconfont?

?三、測試圖標效果

---

?前言

大家好，我是爺爺的茶七里香，最近自己想搞一個網站，感覺網站有點單一，我就給項目加了阿里的iconfont圖標，感覺挺好用的，還是彩色的，順便記錄下。

正篇

一、在官網下載icon圖標

在我們登錄了官網之后按照以下圖片的指示創建一個我的項目；

• 進入我的項目?

• 新建項目?

• 項目相關配置?

?

到這里項目創建好之后我們去找下自己需要的圖標，看以下步驟圖進行后續的操作：?

• 添加入庫?

• 找到庫存?

• 添加到項目

• 下載項目到本地?

二、Vue添加iconfont?

項目下載下來解壓之后的文件如下：

?在assets下創建一個icon的目錄，然后將下載下來的iconfont.js文件放到里面，如圖：

?接著在public目錄下的index.html添加以下（通用）代碼：

.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden; }

我們需要在main.js里面引入我們放進項目里邊的js文件，如圖：?（路徑自行調整）

?三、測試圖標效果

?我們需要打開下載下來的demo_index.html文件，看以下圖片進行操作：

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use> </svg>

效果：

🥇原創不易，還希望各位大佬支持一下！
👍點贊，你的認可是我創作的動力 ！
🌟收藏，你的青睞是我努力的方向！
??評論，你的意見是我進步的財富！?

總結

以上是生活随笔為你收集整理的Vue使用阿里iconfont图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。