微信小程序iview-weapp中使用自定义iconfont

首先登录https://www.iconfont.cn/找到你要的图标
在这里点 查看在线链接并复制代码

image.png

在项目中新建根目录下新建 iconfont.wxss(如果你想用其他的文件名,我保证不打死你) 把代码贴进去
在这里点 font class
image.png

点下载到本地
解压下载的文件
image.png

打开红框中的文件,拷贝蓝框的内容添加到iconfont.wxss

最终你的iconfont.wxss应该像这样的:


image.png

在app.wxss中第一行 @import 'iconfont.wxss';
然后就可以在小程序中愉快地使用iconfont了

在项目中添加 iview-weapp 参考官网
https://weapp.iviewui.com/docs/guide/start

几种使用方法:

方法1直接使用class:

<view class=" iconfont xxx "> </view>

或者可以这样

<i-icon class=" iconfont xxx "/>

方法2使用i-class:

<i-icon i-class=" iconfont xxx "/>

方法3直接使用type:
在 ../../dist/icon/index.wxss第一行添加

@import '../../iconfont.wxss';

然后你就可以这样用了,就像iview-weapp自带的一样

<i-icon type=" iconfont xxx "/>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值