一、选取需要的icon
1.在iconfont上选取自己所需要的图标,然后添加到库内
![](https://img.haomeiwen.com/i1656365/a6a6d855700593c6.png)
2.将挑选的图标添加到自定义的项目中
![](https://img.haomeiwen.com/i1656365/08e6297f92eae95c.png)
3.选择生成font class的代码
![](https://img.haomeiwen.com/i1656365/ad12adf73ff2f11b.png)
4.点击链接进入代码并复制全部
![](https://img.haomeiwen.com/i1656365/2f0b1e9acc879691.png)
二、在微信小程序中使用iconfont
1.在项目下创建style文件夹,并建立所需要的wxss文件,然后在wxss文件中将在iconfont上生成的css代码全部粘贴进去
![](https://img.haomeiwen.com/i1656365/85532dde25b632a5.png)
2.在app.wxss内引用
![](https://img.haomeiwen.com/i1656365/cdd9b242c6acc288.png)
3.使用icon:
<view class="iconfont icon-shangxiahuadong"></view>
这里的 icon-shangxiahuadong 可以直接在 iconfont 上复制代码即可,其余部分是固定的。但是首先要保证在style内创建的wxss内有该icon的样式。
![](https://img.haomeiwen.com/i1656365/e7d0d2222a5b83f3.png)
三、其他
1.如果要改变样式外观可以在wxss文件中直接修改
![](https://img.haomeiwen.com/i1656365/3deab5bf39f3af3e.png)
2.如果是想要根据点击事件来改变图标的颜色,可以直接监听事件然后加一个class上去即可。
网友评论