目錄
1.下載字體圖標
?1.選擇需要的圖標加入購物車添加到項目
2.查看項目?
3.生成在線鏈接?
?4.復制生成的鏈接 等下放到iconfont.json中?編輯
2.引入鏈接
1.下載?
2.生成iconfont.json文件
3. 在iconfont.json中 放入生成的鏈接
4.需要重新編譯小程序之后在終端執(zhí)行
5.在app.json中引入字體圖標
6.在頁面中使用
?7.頁面效果
3.添加新的字體圖標
1.下載字體圖標
阿里圖標庫
?1.選擇需要的圖標加入購物車添加到項目
2.查看項目?
3.生成在線鏈接?
?
?
?4.復制生成的鏈接 等下放到iconfont.json中
2.引入鏈接
微信小程序終端
1.下載?
npm install mini-program-iconfont-cli --save-dev
2.生成iconfont.json文件
?npx iconfont-init
3. 在iconfont.json中 放入生成的鏈接
{ "symbol_url": "http://at.alicdn.com/t/c/font_4139719_05pisap1amvb.js",// 在圖標庫里面生成的鏈接 "save_dir": "./iconfont", "use_rpx": false, "trim_icon_prefix": "icon", "default_icon_size": 18 }
4.需要重新編譯小程序之后在終端執(zhí)行
生成fonticon文件夾
npx iconfont-wechat?文章來源：http://www.zghlxwxcb.cn/news/detail-558919.html
5.在app.json中引入字體圖標
"usingComponents":?{
????"iconfont":?"/iconfont/iconfont",
?},
6.在頁面中使用
<iconfont size="40" name="icon_1-12"></iconfont>?里面的name就是設置不同的字體圖標名稱
查看字體圖標的name
?打開下載文件里面的html也可以查看
?7.頁面效果
3.添加新的字體圖標
1.添加新的字體圖標就把需要添加的圖標添加到項目中
2.復制生成的鏈接，替換項目之前在iconfont.json中 放入的鏈接
{
"symbol_url": "http://at.alicdn.com/t/c/font_4139719_05pisap1amvb.js",// 在圖標庫里面生成的鏈接
"save_dir": "./iconfont",
"use_rpx": false,
"trim_icon_prefix": "icon",
"default_icon_size": 18
}3.重新編譯小程序 在終端執(zhí)行
npx iconfont-wechat?
就可以使用新加入的圖標了?文章來源地址http://www.zghlxwxcb.cn/news/detail-558919.html
到了這里，關于微信小程序使用字體圖標——鏈接引入的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
