iconfont 官网
iconfont-阿里巴巴矢量图标库https://www.iconfont.cn/
步骤
1. 打开 iconfont 官网查找需要的图标,加入购物车,添加到项目,没有项目就新建一个。
2. 将项目下载到本地。![](https://i-blog.csdnimg.cn/direct/a83ff1300d1f47b2b6bf3defa81497be.png)
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 后缀带的图标名。