iview cdn加载字体图标正常， 本地加载js和css时加载不出字体图标

最新推荐文章于 2023-05-06 17:15:02 发布
最新推荐文章于 2023-05-06 17:15:02 发布
阅读量1.1k 收藏
点赞数 2
分类专栏： iview fonticon 文章标签： css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/banglei123/article/details/106489238
版权

使用iview做一个小工具，为了项目不受其他平台影响，把cdn的js和css下载到本地引用，结果字体图标加载不出来了。

 

 查看network 发现加载字体图标的文件加载失败，他引用的是本地static/fonts 下的字体图标文件

 

把本地js和css引用换成cdn发现引成功了

把ionicons.woff2文件下载放到本地的static/fonts 文件夹下，在吧js和css切换成本地，就可以了

bangleilei
关注
专栏目录
通过CDN方式使用iView框架
LvFengBing_23的博客
04-13 5122
通过CDN方式使用iView框架 html页面导入： <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css"> <script type="text/javascript" src="http://vuejs.org/js/vue.min....
iview地区加载_LoadingBar 加载进度条
weixin_35764712的博客
02-23 994
LoadingBar 加载进度条概述全局创建一个显示页面加载、异步请求、文件上传等的加载进度条。说明LoadingBar 只会在全局创建一个，因此在任何位置调用的方法都会控制这同一个组件。主要使用场景是路由切换和Ajax，因为这两者都不能拿到精确的进度，LoadingBar 会模拟进度，当然也可以通过update()方法来传入一个精确的进度，比如在文件上传时会很有用，具体见API。在路由中使用//...
iview vue 打包图标不显示_vue.js iview打包后字体图标不显示解决办法
weixin_27964579的博客
12-24 519
在vue+cli项目中使用iview组件及icon图标，打包后icon不显示,解决办法：1.在build文件夹下找到utils.js文件，把publicPath改为 ../../if (options.extract) {return ExtractTextPlugin.extract({publicPath:'../../',use: loaders,fallback: 'vue-style-l...
iview 加载html文件,解决webpack+Vue引入iView找不到字体文件的问题
weixin_42299205的博客
06-09 179
这篇文章主要为大家详细介绍了解决webpack+Vue引入iView找不到字体文件的问题，具有一定的参考价值，可以用来参考一下。感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！原因：css-loader后面带了参数modules(打包报错)url-loader后面带了参数name(引入报错)代码如下：{test: /\.css$/,use: ExtractTextPlugin.extr...
腾讯cdn第一次不加载css,配置cdn后css加载不出
weixin_39624332的博客
08-03 601
内容分发网络 CDN内容分发网络(CDN)将源站内容分发至靠近用户的加速节点，使用户可以就近获得所需的内容，解决Internet网络拥挤的状况，提高用户访问的响应速度和成功率，从而提升您业务的使用体验多种计费方式助力电商、金融、游戏、医疗、媒资、直播等行业站点、下载、点播、直播场景加速配置CNAME域名解析||https://support.huaweicloud.com/qs-cdn/cdn_0...
低调的css3属性font-size-adjust
weixin_30404405的博客
11-06 195
在我们日常的项目中经常会用到不同的字体来达到我们想要的效果，可是某些情况下不同字体的大小在相同的px下显示的大小是不同的 <div id="div1">Text 1</div> <div id="div2">Text 2</div> <div id="div3">Text 3</div> <div id="d...
woff文件 服务器上找不到,vue Iview 项目部署到服务器上woff2文件 net::ERR_ABORTED 404 (Not Found)怎么处理？...
weixin_39814126的博客
07-31 593
问题图片：我从浏览器的Source中去看，的确是没有woff2这个文件。但是，我用全局搜索，也只是在webpack.base.conf.js中看到woff2的字眼：`module: {rules: [{ test: /\.vue$/,loader: 'vue-loader',options: vueLoaderConfig},{test: /\.js$/,loader: 'babel-loader...
vue.js iview打包上线后字体图标不显示解决办法
10-15
总的来说，解决Vue.js + iView项目中字体图标不显示的问题通常涉及到调整CSS打包配置和检查字体文件的引用路径。通过上述步骤，大多数情况下可以成功修复这个问题。如果问题依然存在，可能需要进一步检查项目的其他...
iview树添加图标
10-31
iview树添加图标
iview在vue-cli3如何按需加载的方法
10-17
在Vue.js开发中，使用组件库如iView可以极大地提高开发效率，但引入完整的库可能会导致包体积过大，影响页面加载速度。为了解决这个问题，我们可以采用按需加载（tree-shaking）策略，只引入实际使用的组件。在Vue ...
iview 3.x 升级指南 —— Icon 篇
weixin_33725126的博客
07-29 1973
iview 在今年 7 月 28 号发布了 3.0.0 版本，大版本升级往往意味着功能、接口的大变更。 虽然官网已经有长长的更新日志，但看起来还是有些抽象了， 所以我决定做个新旧版本的比较，盘点新版本到底为我们带来了什么新特性。 这是系列文章的第一篇，讲的是最简单的组件 —— Icon，希望能给大家带来帮助 结论 新版本 Icon 有如下变化点： 新版本的 Icon 组件支持更多图标类型 新...
iview vue 打包图标不显示_vue.js iview打包上线后字体图标不显示解决办法
weixin_35780426的博客
12-24 276
在vue+cli项目中使用iview组件及icon图标，打包后icon不显示,解决办法：1.在build文件夹下找到utils.js文件，把publicPath改为 ../../if (options.extract) {return ExtractTextPlugin.extract({publicPath:"../../",use: loaders,fallback: "vue-style-l...
iview中使用iconfont离线图标字体资源
浪潮行舟_chenjin2136
04-24 1327
最近项目中要使用离线图标字体，项目是基于iview+typescript的。现将怎么使用离线图标字体进行如下说明： 进入官方图标库 打开图标网站https://www.iconfont.cn/，进入官方图标库 选择所需图标 选择需要的图标，支持不同的图标库多选 保存所选图标 点击购物车，进入本次所选所有的图标 4.下载图标离线字体...
iview中icon不能显示的问题
热门推荐
qq_39865491的博客
10-26 1万+
当代码中引入自定义的icon时,iview中原来的icon就不能显示出来了 这是因为引入了自定义的icon,使得icon的格式发生了变化 在iview的icon前面加上ivu-icon-,完美解决 ...
iView导航菜单Menu切换后图标不显示的问题处理
ghost的博客
07-21 1573
因为用惯了vue2.0，所以搭配iView还是使用的ViewUI，结果再想使用切换菜单时发现官方给的例子出现图标不显示的bug，不知道Plus会不会出现这个问题。
less变量覆盖定制样式时iconfont字体图标无法显示的解决方案
最新发布
Ricky__H的博客
05-06 811
在vite.config.ts的less配置 rewriteUrls:'all'就会自动转换依赖文件的路径，字体图标即可正常显示
iview使用时部分图标不显示
baidu_41682543的博客
09-24 1676
最近在使用iview时，发现icon中部分图标不能显示，询问度娘后才知之前引入的是 " view-design " 而不是官网的 " iview " 。 iview官网地址：https://iview.github.io/components/icon view-design官网地址：https://www.iviewui.com/components/icon ...
WOFF2与icon字体化
iOS060302的博客
04-25 4136
如今，各浏览器对WOFF的支持都已经比较完善了。如果长期关注字体文件，就会发现现在又多了一个WOFF2的格式。没错，就如其字面意思，就是WOFF2.0。 先简单回顾一下主要的web字体文件的格式: .eot ，Embedded Open Type，主要用于早期版本的IE，是其专有格式，带有版权保护和压缩。 .ttf ，TrueType，在操作系统里更为常见，在web上使用的话
ionic如何使用第三方iconfont，以及图标微调 （转载）
钢ge的博客
03-14 1万+
ionic如何使用第三方iconfont，以及图标微调 （转载）
Ionicons开源图标集合 v5.2.3
11-02
为您提供Ionicons开源图标集合下载，Ionicons是一个完全开源的图标集，其中包含1100多个图标，这些图标是专为Web，iOS，Android和桌面应用程序而设计的。Ionicons是为Ionic Framework构建的，因此图标同时具有Material Design和iOS版本。我们打算将此图标包与Ionic一起使用，但绝不仅限于此。无论您是个人还是商业用户，都可以在合适的地方使用它们。它们是使用的，并根据MIT许可。注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值