微信小程序使用iconfont在线icon
生活随笔
收集整理的這篇文章主要介紹了
微信小程序使用iconfont在线icon
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
微信小程序可以使用外部icon,比較常用的就是iconfont,可以搜索想要的icon和選擇想要的顏色然后png下載,然后放到小程序的images文件夾里本地使用。
為了節(jié)省空間,也可以在線使用
- 在iconfont官網(wǎng)中我的頁面創(chuàng)建一個自己的項目
?
- 然后回到首頁,搜索自己想要的icon
- 選擇喜歡的一個,點擊購物車?圖標,添加入庫
- 點擊右上角的 購物車?
- 點擊添加至項目
- ???????選擇第一步創(chuàng)建的那個項目
?
- 來到我的項目
- 可以根據(jù)自己的習慣改變icon名字
- 點擊查看在線鏈接
- 如果是第一次查看的話,會顯示暫無代碼,點擊生成,如果不是第一次,則會顯示更新代碼
- 然后點擊鏈接,進入到css頁面。將頁面的所有內(nèi)容復(fù)制,到項目的根目錄下新建一個iconfont.wxss文件,將內(nèi)容復(fù)制進去。
- 然后在app.wxss中導(dǎo)入
??
- 將 font-family:?"iconfont"?!important; 改成 font-family:?"icon"?!important;
- 接下來就可以使用啦
- 這里可以改變icon的大小,但是所有的都會統(tǒng)一
?
通過view調(diào)用,可以直接在view上改變大小,使用font-size屬性
<view class="iconfont icon-usermsg" style="font-size: 38px;" />也可通過vant組件調(diào)用,使用size屬性更改大小,color屬性可以直接更改想要的顏色
<van-icon class="iconfont" class-prefix="icon" name="usermsg" size="38px" color="red"/>???????
總結(jié)
以上是生活随笔為你收集整理的微信小程序使用iconfont在线icon的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: MAC m1芯片 Ubuntn配置过程
- 下一篇: OCR识别中级篇,Halcon实战项目讲