uniapp 使用 iconfont 图标

iconfont 官网

iconfont-阿里巴巴矢量图标库https://www.iconfont.cn/

步骤

1. 打开 iconfont 官网查找需要的图标，加入购物车，添加到项目，没有项目就新建一个。

2. 将项目下载到本地。

3. 解压下载的文件，找到 iconfont.css 文件和 iconfont.ttf 文件，复制到项目中去，一般放在 static 文件夹下，新建一个文件存放。

4. 在项目中打开 iconfont.css 文件。

由于我们刚刚只引入了 .ttf 后缀的字体文件，这里就只保留最后一个即可，文件路径修改为 .ttf 在项目中的路径，代码如下：

font-family 可以用默认的也可以自己命名，我这里是改了的，要改三个地方。

5. 引入

全局引入在App.vue中引入，在 <style> 标签下引入。

局部引入，在需要用到的页面引入，方法一样。

6. 使用

<uni-icons custom-prefix="iconfontx" type="camera"></uni-icons>

custom-prefix 对应 font-family ，type 对应 icon 后缀带的图标名。