美文网首页
微信小程序iview-weapp中使用自定义iconfont

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

作者: 笨小孩81 | 来源:发表于2019-10-17 15:12 被阅读0次

    首先登录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 "/>
    

    相关文章

      网友评论

          本文标题:微信小程序iview-weapp中使用自定义iconfont

          本文链接:https://www.haomeiwen.com/subject/xuammctx.html