微信小程序使用自定義字體圖標 (親測方法)

場景
1、設計圖上面很多純色icon,比如搜索icon,右箭頭icon

2、讓設計師根據iconfont的圖標製作規則 鏈接如下
https://www.iconfont.cn/icons/upload?spm=a313x.7781069.1998910419.d1baf4ee7 
製作svg圖片

3、上傳圖片到iconfont,添加到購物車,然後下載代碼

4、本地項目,新建iconfont.wxss ,把剛剛下載的代碼包中的iconfont.css 內容複製到iconfont.wxss
當然, 其實我們只要base64這一段,可以刪掉其他不需要的src跟url

5、然後在app.wxss 中,引入該iconfont.wxss 文件
@import "/style/font/iconfont.wxss";

6、頁面中引用
<view class="iconfont 圖標對應classname"></view>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章