微信小程序如何使用iconfont

一、选择iconfont样式

1、阿里巴巴矢量图标库

• 链接：https://www.iconfont.cn/
  

2、选择想要的样式，并加入购物车

3、将购物车中的图标添加至项目

4、在项目中点击font class并生成代码

5、选中链接，右键跳转至该链接，复制全部代码

二、微信小程序

1、在小程序中新建icon目录，并在目录下新建icon.wxss文件

2、将刚才的代码复制到icon.wxss文件中

3、在需要引入图标的地方编写如下代码

<!--index.wxml-->
<view>
  <text class="iconfont icon-wode"></text>
</view>

4、在对应的wxss文件中引入icon.wxss

/**index.wxss**/
@import '/icon/icon.wxss'

5、最终效果

6、注意，text组件的类名要与icon.wxss中的类名一致