- 进入https://www.iconfont.cn/官网,
- 搜索目标图标,图标类型为“单色图标”
- 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中
4. 在小程序项目文件中建一个新的文件夹,命名为iconfont;
5. 在iconfont文件夹下新建一个wxss文件,并命名为iconfont.wxss
6. 回到iconfont网站,点击复制代码(j即:复制生成的CSS的链接地址)
7. 打开浏览器,输入上一步骤中的链接地址
8. 将网页中的内容复制到iconfont.wxss文件中
9.在小程序app.wxss中引入iconfont.wxss,如图
10. 在页面中使用,wxml部分代码如下:
<text class="iconfont icon-图标名"></text>
或者
<i class="iconfont icon-图标名"></i>
eg:<i class="iconfont icon-kache"></i>
- 最终效果如图
- 修改图标颜色,wxss部分代码如下
<text class="iconfont icon-图标名" style="color: red;"></text>
效果图:
- 修改图标大小
<text class="iconfont icon-图标名" style="font-size:30px;"></text>