1 官方自带

样式基于 v2 “style”: “v2”, app.json设置的v2，删除这个就没有呢

icon 官方地址 https://developers.weixin.qq.com/miniprogram/dev/component/icon.html

<view class="cu-list grid col-3"><view class="cu-item" wx:for="{{iconType}}" wx:key="*this"><icon type="{{item}}" size="45"></icon><text class="text-bold">{{item}}</text></view>
</view>

iconType:['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'],

type一共有9个

2 自定义添加

阿里巴巴矢量图标库地址 https://www.iconfont.cn/

2.1 使用

比如：我搜索爱心

选择点击购物车

点击右上方的购物车

添加至项目

我随便选择一个 demo项目，然后点确认

2.2 管理自己图标

点对应项目demo

代码方式这边目前用的是 Font class

点查看代码链接
然后点此生成代码

双击这里，跳入这个页面

复制下来

2.3 在小程序使用

粘贴到 wxss文件中

在wxml 页面引用

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

目前，整个引用完毕，是不是很简单

2.4 进行简单的优化

由于写class 要同时写2个 iconfont iconxiai 比较麻烦，我们进行优化一下！

添加这个代码

[class*="icon"] { font-family: "iconfont";font-size: inherit;/*继承父级*/font-style: normal;-webkit-font-smoothing: antialiased;/*抗锯齿，字体清晰*/-moz-osx-font-smoothing: grayscale;/*抗锯齿，比较清晰*/
}

解释：
font-family: 这个参数来自 @font-face中的 font-family中的 iconfont
font-size：参数 inherit 继承父级

应用是简单一个 icon xiai

<view class="iconxiai"></view>

可以去掉多余的 iconfont

是不是很神奇

微信小程序添加icon图标教程相关推荐

微信小程序使用icon图标
项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一步:下载需要的字体图标第二步:转换tt ...
微信小程序云函数使用教程【超详细】
背景需求在本人的项目中,需要调用一个http的接口,而微信小程序所有的网络请求都得使用https,因而需要一个中转站,使得在正式发布的时候可以使用http接口.(在调试环境下,只要在本地设置里勾选& ...
微信小程序缓存获取数据教程
微信小程序缓存获取数据教程每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSy ...
微信小程序使用font-awesome图标库
微信小程序使用font-awesome图标库网上看到的方法,亲测成功:参考方法下载font-awesome字体包打开Transfonter网站,上传字体fontawesome-webfont.t ...
qt修改程序图标名称_解决Qt应用程序添加icon图标，修改窗口图标以及添加系统托盘问题...
一.Qt应用程序添加icon图标的方法: 首先,我们需要先准备两个文件,一个是icon图标,另一个是rc文件,我分别命名为"myApp.rc"和"soft.ico&quo ...
如何在微信小程序添加漂流瓶_漂流在数海中
如何在微信小程序添加漂流瓶 This summer I helped a client automate several Excel sales reports, comparing sales fo ...
微信流媒体直播java_微信小程序直播带货教程
微信小程序直播带货教程微信小程序正式推出直播带货组件,很多正在使用 "api工厂" 的用户,这几天一直在问,现有小程序如何使用直播带货的功能,需要不需要做很复杂的改动?是否需要重 ...
微信小程序引入阿里巴巴图标库
微信小程序引入阿里巴巴图标库在阿里巴巴图标库下载需要的图标,得到iconfont.wxss文件. 将iconfont.wxss文件放在style目录下. 在app.wxss引入,页面里面添加代码 @ ...
2022 新版UI界面影视微信小程序源码附教程
2022 新版UI界面影视微信小程序源码附教程源码简介源码演示源码下载源码简介 2022 新版UI界面影视微信小程序源码附教程环境PHP7.0 - fileinfo–Redis–SG ...
微信小程序——添加按钮格式
微信小程序--添加按钮步骤一:在wxml文件中添加按钮代码(图后提供可复制代码) <button class = "button_cat">炸炸呼呼</butt ...

微信小程序添加icon图标教程