uniapp引用iconfont

最新推荐文章于 2024-05-11 16:37:28 发布

霸气灬剑意

最新推荐文章于 2024-05-11 16:37:28 发布

阅读量331

点赞数

CC 4.0 BY-SA版权

分类专栏： uni-app 文章标签： uni-app vue.js

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_43762607/article/details/115468809

uni-app 专栏收录该内容

4 篇文章

订阅专栏

uniapp引用iconfont

1.选择自己需要使用的图标并选择Unicode下载。
2.将其中的css文件复制到uniapp项目的static下的styles文件夹（没有可以自己建）![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7c731032cb8a5092627350b788c86f69.png#pic_center)
3.回到iconfont网站，点击获取最新在线代码后复制代码。
4.打开复制到项目里的css文件，将代码替换进去（@font-face部分替换成刚才复制的代码）
5.在App.vue中引用css文件
6.就可以正常使用了。

今天学习uniapp的时候需要使用iconfont，网上找了很多方法都不靠谱，甚至还有用到transfonter转码的，非常麻烦还没用。我的解决方案如下：

1.选择自己需要使用的图标并选择Unicode下载。

在这里插入图片描述

2.将其中的css文件复制到uniapp项目的static下的styles文件夹（没有可以自己建）

3.回到iconfont网站，点击获取最新在线代码后复制代码。

在这里插入图片描述

4.打开复制到项目里的css文件，将代码替换进去（@font-face部分替换成刚才复制的代码）

在这里插入图片描述

5.在App.vue中引用css文件

在这里插入图片描述

6.就可以正常使用了。

在这里插入图片描述

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。