Uniapp引入彩色图标iconfont

最新推荐文章于 2024-05-14 10:15:19 发布

CV大魔王

最新推荐文章于 2024-05-14 10:15:19 发布

阅读量457

点赞数

分类专栏：前端实用技巧 vue uniapp 文章标签： uni-app 前端 vue.js

本文链接：https://blog.csdn.net/qq_45740561/article/details/129133342

版权

5 篇文章 2 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地
对下载的文件进行解压，命令行进入解压后的文件下，执行一下命令，全局安装iconfont-tools工具
```
npm install -g iconfont-tools
```
再执行如下命令，然后回车。
```
iconfont-tools 
```
执行完毕后，会出现一个文件夹，iconfont-xk857，进入iconfont-xk857文件夹下，复制iconfont-xk857-icon.css到项目/static/icon目录下

然后在 App.vue 引入该文件

<style>
/* 彩色的图标*/
@import url("~@/static/icon/iconfont-weapp-icon.css");
</style>

使用：其中xk857-icon开头是必须的，彩色图标当前对 vue文件有效，控制台会关于backgroud的相关警告，可忽略它
```
<text class="xk857-icon icon-sheji-xianxing"></text>
```

关注