1. 程式人生 > >教你怎樣在微信小程式中使用iconfont字型圖示

教你怎樣在微信小程式中使用iconfont字型圖示

有時候在小程式中我們也需要用到字型圖示,要怎樣使用呢?其實非常簡單,只需要以下幾步就可以了

1.在阿里iconfont網站新建一個專案,將你這個專案需要的所有圖示都新增到專案中。如圖 在這裡插入圖片描述 2.下載完成之後,解壓檔案,會看到資料夾中有個iconfont.css檔案,在小程式專案的根目錄下新建一個資料夾,把下載下來的iconfont.css檔案拷貝到新建的資料夾中 3.把iconfont.css檔案改成iconfont.wxss檔案,因為微信不支援css檔案,只支援wxss檔案 4.可以看到檔案中有這樣的樣式 .icon-yuedu:before { content: “\e639”; }

.icon-shouye:before { content: “\e611”; }

.icon-shoucang:before { content: “\e7a9”; }

.icon-dianying:before { content: “\e6ee”; }

5.哪裡需要用到字型圖示就在哪個頁面的wxss檔案中引用就可以了,想要全域性使用的話就直接在app.wxss中引用 @import “資料夾名/iconfont.wxss” 6.在元素上直接新增類名"iconfont icon-yuedu" 這樣就可以使用圖示了