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