vue 项目引入字体图标报错、不显示等问题

最新推荐文章于 2025-06-25 15:35:15 发布
原创 最新推荐文章于 2025-06-25 15:35:15 发布 · 2.1w 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#字体图标不显示 #vue字体图标不显示 #vue字体图标报错 #vue #图标字体

本文解决了项目开发中使用字体图标遇到的两个常见问题：一是引入字体时出现错误，解决方法是将字体引入方式改为绝对路径；二是图标不显示而出现方框，原因可能是未正确引入字体样式文件或使用了.styl文件，解决方法是确保正确引入样式文件并使用.css后缀。

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

问题：在项目开发时使用字体图标，发现两个问题；

1、出现报错：


解决方法为：把字体引入方式改为绝对路径


2、不报错，但是不显示图标字体，出现方框


原因可能有两种：①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件

①的解决办法是在用到的地方引入字体的样式文件（全局引入的话需要从app.vue里引入）


②这个就是我遇到的问题，浪费了我好几分钟！！！微笑

   解决办法是把font.styl改为font.css


记得在用到图标的地方引入


问题原理后续再写

vue项目打包 打包运行报错以及Element UI字体图标不显示问题解决详细过程
格の调
03-08 3779
vue项目本地开发完成后要部署上限，需要先把项目打包，打包步骤我经过试错，总结出简单3步完成。 项目有更新情况打包： 非首次打包可直接：npm run build 即项目前期已经配置好，并经打包部署过运行没有什么问题，后期局部修改后重新打包，可直接运行以上命令进行打包。 项目初次打包部署 项目初次打包部署或打包后运行有问题，需进行以下三步操作： 第1,2步中修改的2处文件位置： 1.config>index.js 文件 里面的dev是开发环境，build是打包部署运行的版本。 找到build
vue引入外部字体包报错(You may need an appropriate loader to handle this file type.)
热门推荐
weixin_44781409的博客
08-12 1万+
vue项目引入外部字体包，然后报这个错 解决方案
vue引入外部字体报错问题
BLUESKYHOST的博客
04-26 1652
报错的原因是路径导致的 目录结构 先上正确的写法 @font-face { font-family: 'ali'; src: url('/src/assets/font/Alibaba-PuHuiTi-Regular.ttf'); } 错误的写法 @font-face { font-family: 'ali'; src: url('../assets/font/...
Vue中引入外部字体并使用
最新发布
nunumaymax的博客
06-25 1199
1.下载需要引入的字体包；2.创建一个新的资源目录 font 文件夹，将需要的字体放在该目录下并创建一个font.css；3.在 font.css 文件中引入想要的字体；4.在项目中全局引入写好的 font.css 文件；5.那么现在就可以在 vue 组件中随意使用引入的字体样式啦！
Vue中引入字体失效 .ttf
2301_77708638的博客
02-29 1536
1. 把字体格式 .ttf转为 .woff 就可以用了 下面是一个转换器。2.因为无法解析.ttf文件 需要额外配置解析文件，还有事，弄完再配。解决：默认正常操作导入字体文件没问题。引入字体失效 .ttf格式。
关于vue项目font字体图标库导入未显示的问题
a958737122的博客
01-01 780
运行项目时，弹出以下信息： 这时候根据报错信息，但要注意一点：后面的css-loader和vue-loader必须有先安装过，不然程序还是报错的。这里我们是想导入icon.scss然后出错，可能是配置文件的缘故。所以进入build文件夹下的webpack.base.conf.js 上面的loader说明加载是依赖'url-loader',然而我们打开_icon.scss文件。...
后台显示数据vue不显示_关于vue项目font字体图标库导入未显示的问题
weixin_39864387的博客
11-25 266
运行项目时，弹出以下信息：这时候根据报错信息，但要注意一点：后面的css-loader和vue-loader必须有先安装过，不然程序还是报错的。这里我们是想导入icon.scss然后出错，可能是配置文件的缘故。所以进入build文件夹下的webpack.base.conf.js上面的loader说明加载是依赖'url-loader',然而我们打开_icon.scss文件。发现这里的loader加载...
解决vue 项目引入字体图标报错、不显示等问题
12-02
问题：在项目开发时使用字体图标，发现两个问题； 1、出现报错： 解决方法为：把字体引入方式改为...以上这篇解决vue 项目引入字体图标报错、不显示等问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希
Vue2.x中利用@font-size引入字体图标报错的解决方法
10-17
总结一下，解决Vue2.x中利用`@font-size`引入字体图标报错的步骤如下： 1. 检查并修正字体文件的引入路径，确保使用绝对路径。 2. 确保在使用字体图标的组件或全局样式文件中引入字体样式文件。 3. 如果使用`.styl`...
使用字蛛压缩字体后在vue组件中使用无效，在控制台发现转换为base64文件了，而且还是 0kb显示，跪求大神破解
wejh233333的博客
03-21 1349
使用字蛛压缩字体后在vue组件中使用无效，在控制台发现转换为base64文件了，而且还是 0kb显示，跪求大神破解 在vue组件样式中引用压缩后的字体，发现没有效果，在netWork中看到字体被转为base64格式了，直接引用没有被压缩的是可以使用的，但是字体文件太大了，不在vue组件中，另创一个html文件使用压缩字体是没有问题的。 下面这张是在vue组件中的字体加载： 这张是直接在html中...
iview vue 打包图标不显示_vue.js iview打包上线后字体图标不显示解决办法
weixin_35780426的博客
12-24 309
在vue+cli项目中使用iview组件及icon图标，打包后icon不显示,解决办法：1.在build文件夹下找到utils.js文件，把publicPath改为 ../../if (options.extract) {return ExtractTextPlugin.extract({publicPath:"../../",use: loaders,fallback: "vue-style-l...
vue 打包上线后字体图标不显示
qq_41091678的博客
06-30 824
Vue+elementUI build打包部署后字体图标丢失，控制台显示文件element-icons.woff和element-icons.ttf文件404 如果已经下载 “file-loader”: “^1.1.4”,没下载就安装 npm/cnpm install file-loader --save 就直接修改 webpack utils.js 修改：（build目录下utils.js） 添加 publicPath: ‘…/…/’ if (options.extract) { return E
iconfont 通过（font-class）引入图标库，失败。
weixin_42281924的博客
12-27 2442
今天遇到这个问题也是头皮发麻。 错误示范： 正确的动作：地址前面加个http
vue上线后图片不显示_解决Vue打包后访问图片/图标不显示的问题
weixin_34137975的博客
02-22 2873
大家可否遇到过 npm run build打包后，项目在线上运行时，资源文件 (图片、图标)不显示 的问题，接下来，我给大家分享一下我的解决方案~1.检查打包后dist中的css文件打开此文件后你会头晕，因为都是打包压缩过的css代码，不过没关系 ，关键字搜索url检查该url路径是否匹配正确对比后惊人发现！！！因此在url路径前添加../../就OK了， 但是 很麻烦，每次打包后都要进行二次加工...
vue中引入字体资源遇到的问题
weixin_44528408的博客
04-29 732
"@"是jsconfig.json/tsconfig.json配置的资源路径。"~"是webpack中css-loader提供的导入资源语法。这种写法能加载字体，但是无法应用字体。这种写法会报错，甚至无法通过编译。这种写法可以加载并应用字体。
Vue项目中在线引入icon-font图标字体却不显示的原因
weixin_47140911的博客
07-22 3676
项目中，明明在index.html中引入了在线图标字体（步骤：1.登录https://www.iconfont.cn/，搜索你想要的图标字体并加入购物车；2.点击购物车，将选好的字体添加到项目；3.点击font-class按钮，复制路径；4.在index.html中引入，记得要加http:） <!-- iconfont图标字体库 --> <link rel="stylesheet" href="http://at.alicdn.com/t/font_2693178_7220v.
vue引入外部字体
马优晨
07-18 4825
1、下载所需要的字体，.ttf格式本文以（HYLiLiangHeiJ.ttf 为例） 2、在src下新建CSS文件，文件夹中包含以下文件 3、打开font.css 这里注意两个问题： （1）URL里面必须是绝对路径； 否则： （2）如果使用使用绝对路径，必须文件上传到自己服务器的CDN 否则： @font-face { font-family: 'HYLiLiangHeiJ'; sr...
vue引入外部字体包报错(Source code omitted for this binary file)
Charis--Cai
06-12 5421
vue项目引入外部字体包，然后报这个错，在网上搜，都是说使用webpack打包的时候才会出现这个错（原因是缺少loader） 解决方案：将字体包转换一下，转换地址为https://transfonter.org/ 然后下载下来 引入就OK了。 纯属做笔记 ...
vue3使用图标报错
03-10
### Vue3 中使用图标时遇到的错误解决方案 当在 Vue3 项目中集成来自 iconfont.cn 的图标库并遇到报错...此外，也可以考虑利用 npm 安装形式的 IconFont 库，这样可以直接作为模块导入而不需要额外处理跨域等问题。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值