一.在iconfont中找到自己需要的图标并加入创建的项目中
iconfont网址链接:https://www.iconfont.cn
我项目中添加的图标
二、点击下载至本地
下载的文件
三、对下载好的文件进行解压,更改名称,并将文件复制到项目文件中
1.文件夹命名为fonts,名称可取任意
2.删除的demo.css
和demo.html
为官网使用文档,可以根据需要进行删除
3.将iconfont.css
改为iconfont.wxss
,小程序中css样式文件后缀为wxss
4.将fonts
文件夹放在assets
下(放置位置依据个人习惯)
更改文件过程
fonts位置
四、在页面中进行引入使用iconfont
1.在使用界面wxss引入样式表fonts/iconfont.wxss
index.wxss界面
@import '/assets/fonts/iconfont.wxss';
2.在index.wxml页面中使用
<icon class="iconfont iconshangyishou" ></icon>
iconfont
必须要写 ;
iconshangyishou
是样式名称
样式名称可在iconfont我的项目中复制代码获取
获取样式名称
五、修改样式名称
打开
fonts/iconfont.wxss
,找到需要修改样式的图标名称替换为新的名称icontext
此处以iconshangyishou
为例,将样式名称修改为icontext
更换名称操作