-
进入https://www.iconfont.cn/官网,
-
搜索目标图标,图标类型为“单色图标”
-
将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中
-
打开目标项目,下载代码至本地(另外:下载Font class或 Symbol格式都可以)
-
将下载的文件进行解压,解压后得到如图所示文件
-
在小程序文件中建一个新的文件夹,命名为iconfont;
-
将步骤4中的iconfont.css文件放入iconfont文件夹下,并将iconfont.css文件更名为iconfont.wxss,如下:
-
在小程序app.wxss中引入iconfont.wxss,如图
-
在页面中使用
wxml部分代码如下:
<text class="iconfont icon-图标名"></text>
或者
<i class="iconfont icon-图标名"></i>
eg:<i class="iconfont icon-kache"></i>
-
最终效果如图
-
修改图标颜色
wxss部分代码如下:
<text class="iconfont iconfont-red icon-图标名" style="color: red;"></text>
效果图:
- 修改图标大小
<text class="iconfont iconfont-red icon-图标名" style="font-size:30px;"></text>