微信小程序中 iconfont真机不显示问题 以及打包的时候提示文件没有被打包上传

已于 2022-08-04 11:14:35 修改
阅读量1.7k 收藏 7
点赞数 1
文章标签： 小程序 前端 iconfont
于 2022-06-16 18:17:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LJJONESEED/article/details/125320998
版权

微信小程序中 iconfont真机不显示问题

转换base64
把 iconfont的ttf文件进行base64转换
在这里插入图片描述
下载之后：打开stylesheet.css文件
在这里插入图片描述
然后复制src:url一整段。
在这里插入图片描述
把自己src中的ttf引入替换成复制的就可以显示了。
在这里插入图片描述
文件没有被打包上传问题
在这里插入图片描述

通过以上替换之后，就可以把除了iconfont.css其他的文件都删除就可以了。就不会提示打包未上传了。
在这里插入图片描述

不完美女孩-
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
今天小编就为大家分享一篇解决vue-cli项目webpack打包后iconfont文件路径的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决微信小程序真机 showToast 不显示
03-29
真机上测试发现调用 showToast 不显示，或者闪一下就没了。经过查找，发现是与 wx.showLoading 冲突了，两者调用的是同个框。 先放上我的错误代码：   // 请求事件 requestEvent: function() {   wx.showLoading({...
uni-app开发微信小程序上传提示以下文件没有被打包上传
fbqgdxw的博客
03-04 6157
解决方案： 1、将根目录static下的font文件转移到其他的文件夹项目，比如我在根目录建了个style目录。 2、将font文件夹及里面的文件拷贝过去@import url('/style/iconfont/iconfont.css'); 3、iconfont.css中 @font-face { font-family: "iconfont"; /* Project id 2557476 */ src: url('~@/style/font/iconfont.woff2?t=...
小程序 iconfont在真机显示不了
LlanyW的专栏
06-13 400
默认的url只能在模拟器上用。需要转成base-64。
小程序iconfont图标真机测试不显示的解决方案
m0_68652823的博客
03-29 929
小程序iconfont图标真机测试不显示的详细教程
小程序 引用iconfont不显示图标问题
LlanyW的专栏
06-07 369
app.wxss全局引用了，在组件使用不显示。需要单独在组件里wxss引用，才给显示这个星星。
uniapp 小程序编译时, iconfont.css 等 部分文件无法上传
weixin_44852765的博客
01-06 1174
出现问题: 真机预览无法显示阿里字体图标 解决办法： 正常操作： 将存放在static根目录下的字体文件转移到其他的文件夹项目，比如我在根目录建了个 font中, 如图: 最后在app.vue 中全局引入
微信小程序之 tabBar 不显示
03-29
第一步，按照index创建了myBus第二步：更改app.json，即全局变量重点在于：最后：完成       第一步，按照index创建了myBus (此图片来源于网络，如有侵权，请联系删除! ) 第二步：更改app.json，即全局变量 ...
微信小程序引用iconfont图标的方法
01-03
最近在研究微信小程序，自己写demo的时候想要引用巴里巴巴图标库的图标，于是： @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype...
微信小程序tabBar底部导航不显示问题解析
03-29
出不来的代码：   [html] view plain copy print?在CODE上查看代码片派生到我的代码片 { "pages": [ "pages/splash/splash", "pages/zhuye/zhuye", "pages/list/list", "pages/item/item", "pages/search/search", ...
解决iconfont在本地运行显示，但打包上传至服务器不显示的问题
cobek的博客
01-20 3403
阿里巴巴图标库： https://www.iconfont.cn/ 创建一个默认项目，然后生成css代码，过程截图如下： 由于生成css代码缺少样式等信息，如eot，就会导致上传至服务器不显示。图中url('data:application/x-font-woff2;charset=utf-的信息表示本地缓存，显示会首先使用缓存中的图标信息进行展示，建议要加上。如果网络不好，且没有数据缓存时，这时会从alicdn获取信息，但由于网络差的原因可能获取不到，导致图标不显示。 解决办法 修改项目设置，如图：
微信小程序分包后报错：[获取文件失败] 以下文件已被配置忽略打包上传，模拟器无法获取： package1/package1/pages/dailyAdmin/index.js
南北极之间
01-15 5183
获取文件失败] 以下文件已被配置忽略打包上传，模拟器无法获取： package1/package1/pages/dailyAdmin/index.js。3、再次编译就没有报错了。但是好像是一次性的。报错的时候，再操作一边setting。1、在微信开发者工具中，右上角点击详情--去掉这个选项。
uni开发微信小程序引入和风天气第三方库 icon不显示问题处理（阿里等icon库同样的处理方式）
最新发布
weixin_50666739的博客
10-27 1173
微信小程序引入第三方库 icon不显示问题处理
iconfont图标无法显示的问题
JFIA的博客
03-26 7562
iconfont图标无法显示的问题 刚开始用icon font图标库不是很熟悉，踩了一些坑，希望分享出来能给新手们带来一些帮助 从官网上下载图标至本地后，放到项目里面要注意一下两点： 1、路径问题 找到iconfont.css这个文件并打开它，你会看到它里面的路径是这样的 报错了，原因是我在项目里面存放路径是这样的 只需要将路径改成你项目结构中的路径即可，修改后： ...
vue项目打包后阿里图标库图标显示不正确问题
莫不静好
09-03 4683
vue项目打包后，在服务器显示图标不正确： - 本地效果如下 - 打包后放置服务器效果如下 试了多种方法无果后发现是和Element中图标冲突了-_-||| 因此把阿里图标放在element后引入： ...
Vue中使用iconfont字体图标转译问题导致的不显示
06-06 1276
导入字体图标后，正常使用时可以显示的，但是用到for循环里面，就会导致显示出错： 所以需要对编码进行转译操作：
微信小程序引入外部iconfont 字体 不显示原因分析
qyx189573的博客
01-14 2377
模拟器上正常 真机不显示 原因 安卓手机不显示，显示为 一个框中的X @font-face { font-family: "iconfont"; src: url('https://xxx/iconfont.eot'); /* IE9*/ src: url('https://xxx/iconfont.eot?#iefix') format('embedded-opentype'), url('https://xxx/iconfont.woff') format('
微信小程序iconfont不显示解决
Sky_Bug的博客
12-20 4635
小程序中用到了 iconfont，但是一次更新图标库后，很多 icon不显示了。 原因：iconfont 之前下载下来是把 woff 文件转成 base64，项目中也一直使用 woff 转成的 base64；目前 iconfont 下载下来后的 iconfont.css中是把 woff2文件转成 base64。 解决方法：使用https://transfonter.org/将 woff 文件转成 base64就可以了 下载 全部替换即可！ ———————————————— 版权声明：本文为CSDN博
微信小程序上传报错：以下文件没有被打包上传: · .gitignore
weixin_30657541的博客
09-05 6347
简单粗暴的办法就是：找到gitignore文件，把该文件删除掉即可。 在使用Git的过程中，我们喜欢有的文件比如日志，临时文件，编译的中间文件等不要提交到代码仓库，这时就要设置相应的忽略规则，来忽略这些文件的提交。 规则 作用/mtk 过滤整个文件夹*.zip 过滤所有.zip文件/mtk/do.c 过滤某个具体文件!/mtk/one.txt 追踪（不过滤）某个具体...
微信小程序支付在真机上实现不了
05-20
如果您在真机上无法实现微信小程序支付，可能是因为您没有完成相应的配置和审核，或者您的代码中存在错误。建议您仔细检查代码和配置，并参考微信支付官方文档进行调试。 如果您遇到问题，可以去微信开放社区或咨询...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值