首页 > 编程语言 >微信小程序项目中使用icon图标

微信小程序项目中使用icon图标

时间:2023-01-30 23:34:43浏览次数:36  
标签:前缀 项目 微信 iconfont icon my 图标

效果:
在这里插入图片描述
步骤:
1、先让ui负责人把你的账号加入到项目中,加入到项目中后就可以在icon图标库中看到该项目
在这里插入图片描述
2、在小程序中使用
新建一个view,在上面加一个class,复制icon名字上去即可,注意格式,格式为iconfont icon名。
在这里插入图片描述

iconfont这个前缀不是固定的,根据icon名字来,icon的前缀为my-icon-xxxx,那么前缀就是 my-icon
没有前缀或者设置了前缀,一般都是使用iconfont,根据项目视情况而定,这里以my-icon举例。
my-icon my-icon-fontxxx // 前缀 icon名

在这里插入图片描述

// 使用icon
 <view class="fontxxx my-icon my-icon-fontxxx "></view>

// 设置icon样式
  .fontxxx {
    font-size:30rpx;
    color:blue;
  }

上面演示的是已经引入了icon的情况,如果没有引入则需要在iconfont图标库下载图标至本地,然后将文件内部的iconfont.css更名为iconfont.wxss,放入到根文件夹的style中即可正常使用。
在这里插入图片描述

在这里插入图片描述

标签:前缀,项目,微信,iconfont,icon,my,图标
From: https://www.cnblogs.com/wang-fan-w/p/17077523.html

相关文章

  • 电脑微信小程序抓包
    电脑微信小程序抓包 在渗透的过程中,对于网站找不出什么漏洞的时候我们就可以,对目标进行小程序和公众号漏洞的发掘0x01设置微信代理使用Burp抓取数据包 发现我......
  • 使用微信开发者工具运行小程序代码时出现的问题
    一、问题在运行代码的时候出现未找到 app.json 的错误 二、寻找原因,尝试运行1、通过百度查找,这样的问题有很多,解决办法比较统一的为在 project.json 中添加 mini......
  • 微信小程序数字转中文wxs
    场景:传入数字,转换成天数,比如:index=1转换后则为一,在页面中的应用就是<view>第{{index}}天</view>,转为第几天。<view>第{{exchange.exChangeNum(index)}}天</view><w......
  • 微信小程序wxs封装使用以及公共js组件封装
    wxs封装wxs可以直接写在wxml页面中,并且在对应的位置调用,比如在{{xxx.xxx()}}调用wxs的函数<view><view>第{{m1.getMax(1)}}天</view></view><wxsmodule="m1"......
  • 微信小程序-【转发好友】以及中文标题乱码问题解决
    微信小程序的转发功能,参考官方文档,使用的buttom的open-type功能,下面是转发功能的具体实现。//通过按钮的open-type="share"实现转发,触发onShareAppMessage函数<butto......
  • 微信小程序-支付
    微信小程序的支付只要用到官方的支付API:wx.requestPayment(Objectobject)官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/payment/wx.requestPaym......
  • 微信小程序自定义导航栏机型适配
    自定义微信小程序头部导航栏,有几种方式方式一{"navigationStyle":"custom"//将navigationStyle从默认default改为custom}定义此方法后,头部的导航栏会去掉,导航......
  • 微信小程序组件封装传值以及问题点规避
    封装组件1、在components文件加下新建组件文件夹,在该文件夹下新建组件2、在app.json中注册该组件"usingComponents":{"page":"components/auth/index","com......
  • 原生微信小程序跳转传参 : [非TabBar跳转传参] 和 [TabBar跳转传参]
    一般常用的微信小程序跳转分为两种1、非TabBar跳转2、TabBar跳转1、非TabBar跳转非TabBar页面的跳转通常使用wx.navigateTo来跳转页面,在链接后面加?传参,如下://跳转......
  • 微信小程序使用vant组件样式不生效的问题
    下面提供几个解决方案方案一:官方文档有说明,将app.json中的"style":"v2"去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。方......