1. 程式人生 > 程式設計 >vue和小程式專案中使用iconfont的方法

vue和小程式專案中使用iconfont的方法

一、vue中使用iconfont

1、百度搜索iconfont或者阿里巴巴向量圖示庫官網,註冊登入;

2、找到圖示管理->新建專案,或者使用已有的專案,用於儲存自己的圖示;

vue和小程式專案中使用iconfont的方法

3、搜尋自己需要的icon;

vue和小程式專案中使用iconfont的方法

4、新增到購物車中;

vue和小程式專案中使用iconfont的方法

5、購物車中就有了相應icon

vue和小程式專案中使用iconfont的方法

6、點選購物車,選擇新增至專案。就是我們剛才建立的專案或者之前已有的專案

vue和小程式專案中使用iconfont的方法

7、點選確定,即可將icon新增到我們的專案中

vue和小程式專案中使用iconfont的方法

8、然後點選我的專案,找到自己的專案,即可看到剛才新增的icon

vue和小程式專案中使用iconfont的方法

9、點選下載至本地

vue和小程式專案中使用iconfont的方法

10、將下載的壓縮包進行解壓

vue和小程式專案中使用iconfont的方法

11、開啟解壓好的資料夾,找到iconfont.css

vue和小程式專案中使用iconfont的方法

12、把解壓好的資料夾放入專案目錄下,在vue專案中的index.html中引入即可使用

如可以放在public資料夾下

vue和小程式專案中使用iconfont的方法
vue和小程式專案中使用iconfont的方法

13、在元件中使用

vue和小程式專案中使用iconfont的方法

總結:

三步搞定

1、將iconfont下載至本地
2、在專案中引入檔案
3、vue中直接使用,然後使用i標籤,通過類來規定使用的icon
4、小程式中把iconfont.css的字尾名改為wxss,在專案中直接使用i標籤即可

到此這篇關於vue和小程式專案中使用iconfont的方法的文章就介紹到這了,更多相關vue小程式使用iconfont內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!