一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。
注：仅作为个人学习笔记记录
@TOC
前言
Hello！小伙伴！
非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～
自我介绍 ଘ(੭ˊᵕˋ)੭
昵称：海轰
标签：程序猿｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，获得过国家奖学金，有幸在竞赛中拿过一些国奖、省奖...已保研。
学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！ 唯有努力💪
文章仅作为自己的学习笔记 用于知识体系建立以及复习
知其然 知其所以然！
场景描述
小程序icon图标需要使用base64编码后的icon，不使用png、jpg等格式的图片
解决方法
1.进入阿里图标库
2. 创建一个项目
项目管理 ------》 我的项目
新建一个项目
勾选
- 彩色
- Base64
再点击确认即可
3.选择图标 并加入项目
找到自己想要的图标
点击购物车按钮
加入购物车
选完后
再点击页面右上方的购物车按钮
添加至项目
4.下载代码
进入“我的项目”
找到刚刚新建的项目
选择“Font class”
选择“下载至本地”
然后保存刚刚下载的文件就好了
5.微信小程序中的使用
找到刚刚下载的文件，解压
点击"demo_index.html"
可以查看Demo的使用方法
不想看demo的，可以直接打开iconfont.css文件
在微信小程序中，新建一个文件myIcon.wxss
把iconfont.css中的内容复制到myIcon.wxss
然后配置全局wxss
- 找到app.wxss
- 引入myIcon.wxss
@import "*********你的路径***/myIcon.wxss";
在需要使用图标的页面
使用<text class="iconfont icon-**图标名字**"></text> 就可以了
比如
<text class="iconfont icon-attent"></text>
名字可以在项目中查到
如果图标显示的比较小
可以修改myIcon.wxss文件中的 font-size:;
这里测试的是200rpx
效果图如下
<text class="iconfont icon-attent"></text>
<view class="iconfont icon-notice"></view>
结语
文章仅作为个人学习笔记记录，记录从0到1的一个过程
希望对您有一点点帮助，如有错误欢迎小伙伴指正
