微信小程序-引入iconfont矢量图标

下载素材

1. 打开阿里素材库官网并登录账号

https://www.iconfont.cn/

2. 输入内容，在搜索框中输入想要查找的图标名称，例如输入“客服”

3. 选择想要的图标，鼠标悬浮该图标处，会出现三个图标选项，点击第一个图标（添加入库）。

4. 添加入库之后，右上角入库图标数字便会发生变化，点击入库图标

5. 点击“添加至项目”按钮，若之前没有创建过项目，则这里默认是空的，可以点击右边的图标去添加项目。

6. 添加项目，并点击“确定”按钮，此时会跳转到新界面。

7. 手动切换到“Font class”选项，并点击“查看在线链接”按钮。

8. 点击“暂无代码，点此生成”链接。

9. 点击确定

10. 点击生成的链接，此时便会跳转到生成好的的css文件页面

项目中引入iconfont

1. 打开微信小程序开发工具，在项目中添加资源文件夹styles，并在该文件夹下添加样式文件iconfont.wxss。

2. 将css的内容拷贝到文件中

3. 全局引入样式，打开app.wxss文件，导入样式文件

@import "./styles/iconfont.wxss"

页面中使用iconfont

<text class="iconfont icon-kefu">客服</text>