vue开发移动端时，引入阿里矢量字体图标，显示为小框框的一种处理办法

『朋程万里』

已于 2022-08-31 22:03:01 修改

阅读量579

点赞数 1

分类专栏： vue移动端开发文章标签：前端开发语言 vue

于 2022-08-23 13:06:13 首次发布

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

本文链接：https://blog.youkuaiyun.com/weixin_68448431/article/details/126482149

版权

在Vue移动端开发中遇到阿里矢量图标显示为小框框的问题，通过下载字体图标样式文件到本地，发现引入类名错误，修正类名后成功解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、字体图标错误图示

在这里插入图片描述
在浏览器的调试栏右侧可以看到样式是添加的，但是左侧显示为小框框。
网上搜索的解决办法都没有解决此问题，于是在阿里矢量图标库将字体图标样式文件下载到本地

下载的压缩文件解压后，如下图：
在这里插入图片描述
打开上图第2个demo_index.html文件,如下图所示：

二、字体图标显示错误原因

字体图标样式文件：
在这里插入图片描述

没有认真阅读上图样式文件中第2行，执行上面第二步引入类时，

最低0.47元/天解锁文章

评论

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

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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