vue引入iconfont阿里字体图标库报错和解决

最新推荐文章于 2023-09-12 10:47:24 发布
最新推荐文章于 2023-09-12 10:47:24 发布
阅读量1.3k 收藏 1
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bule_BUFF/article/details/119811216
版权

引入阿里字体库后报错说找不到文件。
需要在引入的字体iconfont.css中加入绝对路径才可以
在这里插入图片描述
加上绝对路径后字体样式能正确显示也不报错了
在这里插入图片描述
还有一个需要避坑的地方就是图一篮圈处不能加绝对路径，如果加上的话就会出现方框字体，但是不会报错
在这里插入图片描述

蓝胖子~
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue项目引入Iconfont图标库的教程图解
10-17
主要介绍了vue项目引入Iconfont图标库的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue中引用阿里字体图标的方法
08-28
引用阿里字体图标在 Vue 项目中是一件非常简单的事情，只需要正确地配置 Webpack 和引入阿里字体图标的 CSS 文件就可以了。如果您在使用阿里字体图标时遇到了错误问题，不要担心，只需要按照我们的步骤来解决问题就...
uniapp项目里面引入iconfont字体图标，报错❌
研究生在读，分享学习日常。（零基础学习后端编程）
07-14 585
uniapp项目里面引入iconfont报错。我们要修改下src的引入路径。
vue引入iconfont阿里字体图标库以及报错解决
bangpu6497的博客
02-02 1555
下载阿里的字体图标库文件，放在\src\assets\font文件夹下面。 安装style-loader,css-loader和file-loader(或url-loader) ,记得--save-dev webpack的配置文件中添加： { test: /\.css$/, use:['style-loader','css-loader'] }, { test:/...
解决uniapp引入iconfont图标报错
最新发布
weixin_58149434的博客
09-12 310
将引入的iconfont.css文件以及项目全局配置文件uni.scss中的路径地址。
解决vue3引入字体图标iconfont.js时eslint报错的问题
绝对零度的博客
08-30 2500
解决vue3引入字体图标iconfont.js时eslint报错的问题
解决vue 项目引入字体图标报错、不显示等问题
12-02
2、不报错，但是不显示图标字体，出现方框 原因可能有两种： ①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件 ①的解决办法是在用到的地方引入字体的样式文件（全局引入的话需要从app.vue里...
解决VUE3使用Ant-Design的图标组件＜a-icon＞使用报错，自己做个＜b-icon＞
学习使我快乐_玉祥
04-04 6797
浏览器控制台报错：不识别a-icon 网上推荐使用循环遍历每一个组件，进行注册 在main.js写这个循环，多少有点奇怪 并且我在下方这行代码就已经报错了，不太懂这个语法。 const icons: any = Icons; 一筹莫展之际，我决定自己写一个a-icon组件。 <template> <span ref="icon" v-html="code" style="width:25px;height:25px;overflow:hidden;">.
小程序iconfont报错_vue中和小程序中使用iconfont
weixin_42369343的博客
01-17 367
一、vue中使用iconfont1、百度搜索iconfont或者阿里巴巴矢量图标库官网，注册登录；2、找到图标管理->新建项目，或者使用已有的项目，用于保存自己的图标；3、搜索自己需要的icon；4、添加到购物车中；5、购物车中就有了相应icon6、点击购物车，选择添加至项目。就是我们刚才创建的项目或者之前已有的项目7、点击确定，即可将icon添加到我们的项目中8、然后点击我的项目，找到自己...
React： ----本地引入iconfont字体样式（iconfont.css）导致警告
weixin_30564785的博客
03-11 657
如上图为警告提示， 解决办法： 不要在index.html文件中引入该字体样式，从index.css样式文件中引入。 错误： 正确： 转载于:https://www.cnblogs.com/chenmoumou/p/10511718.html...
webpack iconfont 字体图标
weixin_33739627的博客
06-21 181
1、引入你的字体库工程（阿里下载的字体库工程，我命名为font文件名），将其放在src/css/commom文件夹， 2、{ // 文件加载器，处理文件静态资源 test: /\.(woff|woff2|ttf|eot|svg)\??.*$/, loader: 'file-loader?name=./fonts/[name].[e...
vue项目中用Iconfont阿里巴巴矢量图标库解析失败的解决办法
weixin_30882895的博客
07-12 2356
用vue做一款APP开发的时候，在本地文件中引入好font字体文件和字体CSS文件后，运行项目的时候总是提示：Failed to decode downloaded font:，字体图标就显示为一个方框，但是我检查了好几次确定不是引入路径的问题，路径都是对的，也百度了好久，始终没有百度出来。 错误提示图片如下： 就在我快绝望，想换个字体图标库的时候，我去看阿里适量图标库里面有个生成代码的功...
vue中引入字体图标报错，找不到字体文件
whiteGay的博客
10-30 814
在用vue + webpack进行开发的时候，在引用字体图标遇到字体无法加载的问题： 报以下错误 搞了好久没搞定，最后才找到解决方法（还是没有找到原因） 修改字体图标的css中引入字体文件的路径 ...
vue问题记录svg-icon报错，iconclass
Y4258的博客
06-17 2663
svg-icon在vue项目中的使用
【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决，移动端引入报错解决】
seeeeeeeeeee的博客
11-28 4870
为什么要使用阿里图标库： 图标现在是很多地方都会用到的 一般我使用的时候都是直接在ui库中比如elementul自带的一些 有时候哪怕是感觉图标不是非常适合也是用的elementul图标，主要原因是懒 因为能直接复制的，就懒得再去阿里图标库下载遍，差不多就行了。 但是总有些时候你需要的图标是真的在elementul里没有的或者完全不适合的。 这时候我们需要去到阿里的图标库里找找，这里的图标非常多，完全可以满足一切需求了。1，Unicode：兼容性好，ie低版本也好用，可以和文字一样调整颜色和大小。缺点是不显
uniapp 中引入 iconfont 文件报错文件查找失败：‘./iconfont.woff?t=1673007495384‘ at App.vue:6
weixin_64238628的博客
01-07 1768
文件查找失败：'./iconfont.woff?t=1673007495384' at App.vue:6
关于Vue3 + antd vue引入iconfont报错的最终解决方案
fengGer的博客
03-21 1368
我觉得，大概原因是这样【关于引入iconfont时出现的问题，可能是因为iconfont.js文件没有通过export default导出default对象】，所以可以这样去写，在使用时使用iconfont.default来获取default对象。那么今天它的处理方案出来了，无意间发现，可以这么写,但是好像也没有毛用，跟直接写文件地址一个diao样子啊。按照以上示例写完以后，你会神奇的发现，报一个错【引入本地文件，线上地址OK】，没法处理，晕死~~~即可轻松地使用已有项目中的图标。
iconfont无法使用时的应急解决方案
林中路
06-13 5673
iconfont挂了？那项目如何新增图标？来看看这个解决方案
vue引入iconfont
09-06
1. 在iconfont官网（如阿里巴巴矢量图标库）上选择需要的图标，并添加到购物车。 2. 进入购物车页面，点击"下载代码"按钮，选择"symbol"作为字体文件类型，然后点击"下载"按钮。 3. 解压下载后的文件，将其中的字体...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值