微信小程序使用阿里巴巴的矢量图标iconfont
2023-02-18 16:28:14 时间
准备工作
阿里巴巴矢量图标库官网 注册登录之后搜寻自己想要图标
在这里我创建一个示例项目 找两个图标加入 (如果项目很小需求比较少 才一两个的话直接选择颜色下载png格式就好了) 我主要是为了减少包体积 而且增添方便 图标颜色控制 加载快(微信小程序上传上限为 2048 kb)
下载至本地 解压然后把iconfont.css改成wxss文件格式放到在小程序项目的utils文件夹 在app.wxss引入@import ‘./utils/iconfont.wxss’; (在这里我看看到有人 是单个页面重复引入的 包括样式 或者js方法 不推荐 作为前端开发者需要将代码封装分离 提高代码可重复性 以及方便其他人接手 接手过很多小程序项目 把什么都写在一起的真的是无力吐槽 开发难度堪比重做) 准备工作完成
开始
使用方法如图 字体图标还有个好处就是颜色自定 只需要加上color (实在是碰到那种纠结症客户 经常改ui的必备之选啊 就算加东西你也只需要让他们做成svg传到阿里巴巴库去 然后添加 重新下载覆盖iconfont.wxss)
好了 结束 有问题可私聊
相关文章
- 【黄啊码】如何用小程序实现世界杯参赛队伍投票
- 《Android App开发进阶与项目实战》资源下载和内容勘误
- 微信小程序使用阿里巴巴的矢量图标iconfont
- 微信小程序 点击显示隐藏 极简Tab标签 点击添加class样式
- 微信小程序 wx:if 与 hidden区别
- 微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题
- 微信小程序 自定义 tabBar案例 官方案例迁入无效解决方法 非 tab 页显示 tabBar的问题解决 自定义tabBar与原生tabBar以及自写伪tabbar的区别
- IOS APPStore 上传更新应用版本 软件
- Android - NETD解读
- 【Android自定义控件】不用ScrollView实现上下两屏滑动
- Android实现TextView跑马灯效果
- Android进程间通信(一)- Bundle
- Android进程间通信(二)- Messenger
- 微信小程序实现上拉和下拉加载更多
- 微信小程序 scroll-view 完成上拉加载更多
- 微信小程序实现tabs选项卡
- java和vue学生定位打卡小程序人脸识别打卡系统源码网站学生考勤系统
- Java疫苗预约小程序线上疫苗预约系统
- 移动研发提效?小程序容器技术来帮忙!
- 微信小程序(一)自定义导航栏和fixed失效及各机型兼容问题