微信小程序iconfont不显示解决

最新推荐文章于 2024-01-27 19:06:14 发布
最新推荐文章于 2024-01-27 19:06:14 发布
阅读量1.2w 收藏 5
点赞数 5
文章标签： http://github.crmeb.net/u/lsq
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liusunquan123/article/details/88885241
版权

小程序中用到了 iconfont，但是一次更新图标库后，很多 icon不显示了。

原因：iconfont 之前下载下来是把 woff 文件转成 base64，项目中也一直使用 woff 转成的 base64；目前 iconfont 下载下来后的 iconfont.css中是把 woff2文件转成 base64。

解决方法：使用https://transfonter.org/将 woff 文件转成 base64就可以了

在这里插入图片描述
下载
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
全部替换即可！
欢迎加入***群：116279623 入群答案：CRMEB
好消息CRMEB系统开源啦！ 开源地址：http://github.crmeb.net/u/lsq
演示站后台：http://demo25.crmeb.net 账号：demo 密码：crmeb.com

七夜星辰
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
微信小程序 如何引入外部字体库iconfont的图标
08-28
主要为大家详细介绍了微信小程序引入外部字体库iconfont图标的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
crmeb单商户标准版4.4.3最新完整包 含 小程序 公众号 app H5 源码 仅限学习使用切勿商用，商用请购买正版
03-26
crmeb单商户标准版4.4.3最新完整包 解压密码：123qwe 一、更新说明 修复与优化： 1、修复小程序秒杀推推广码错误，拼团推广码不显示的问题 2、购物车底部样式问题 3、修复改价后退款金额还是未改价之前的价格问题 4、修复商品自定义表单，多个图片上传框会互相影响的问题 5、修复商品购买到店自提，退款时多退运费金额的问题 6、修复移动端订单管理退款列表显示用户已经取消的订单 7、修复物流查询有部分查询不出来的问题 8、修复使用99api采集京东商品没有详情的问题 9、修复退款失败但是修改退款订单为已退款的问题 10、修复后台diy时是否显示了仓库中的商品，但是前端是不显示仓库中产品，导致前后端显示不一致 11、修复申请退款后，售后退款中的订单号就改变了。然后收到的退款成功服务消息点进入后订单不存在。 12、修复取消支付 提示的支付成功 13、修复积分抵扣的订单，退款时还退抵扣金额的问题
解决微信小程序网络字体无法在真机上显示
最新发布
m0_48927448的博客
01-27 496
使用腾讯云对象存储 一、上传字体 二、在安全管理，跨域访问CORS设置 三、点击字体文件，详细，设置请求头 四、可以在详细中使用对象地址就能在真机上访问
小程序 ---- （引入iconfont，自定义组件内不显示iconfont）
LizequaNNN的博客
10-13 1822
微信小程序 ---- （引入iconfont，自定义组件内不显示iconfont） 一、全局引入 首先准备好自己要用的iconfont图标： 然后点击生成代码或更新代码，打开网页之后，复制全部代码： 回到小程序，根目录下创建styles文件夹，创建iconfont.wxss文件，把复制的代码都丢进去： 在app.wxss内引入该样式： 然后就可以愉快的使用了~ 但是在组件内却不起作用，这是为什么呢？ 原因就是微信小程序的子组件属于独立模块，独立模块需要使用iconfont时需要将iconfon
微信小程序——如何解决本地图片不显示的问题
gzmhxsn的博客
05-20 5306
解决微信小程序本地图片不显示的问题 这篇记录的是小涂踩的小程序的一个坑：本地图片真机显示不出来！ 问题发现 开发小程序过程中，模拟器上显示一些本地的图标照片（.jpg \ .png …）模拟器上可以清楚的显示出来，像这样： 但是，一到真机上（而且似乎尤其是安卓机上）： 别人的苹果可以显示。这个bug我也是服！ 我查官方文档，发现很多人也提过这个问题，但是官方没有给出结果，只是说可能图片不符合规范，会加载失败。 但是，小涂怎么会放弃呢？ 解决方案 我们可以将图片上传到一些上传图片的网站，我用的是随意云
uni app 小程序中的引用的iconfont图标后预览不出页面的问题
lyh9503的博客
05-07 847
之前引用了阿里的图标，发现小程序在预览的时候页面是空白的，只有在调试的时候才出现内容， 解决方法 用手机扫码预览小程序页面，点击页面右上角三个小点，选中开发调试功能，页面就出出现一个vConsole按钮，打开就能到报错信息， 原来是下载的iconfont包里面的js文件报错，将文件注释掉以后，页面还能显示图标，只是用图标的话没有影响， 这样预览就可以出现了内容了， ...
小程序中iconfont不显示问题
qi__lu的博客
06-23 1580
近期在写小程序的时候，用到了阿里巴巴的字体库，但是有的显示，有的不显示，百度了很久，也没有找到解决的办法，中午吃完饭，突然有点儿明白了 icon字体 不能 在display的值是line的元素里 因为icon标签默认的display的值是inline-block，就像是行内块元素在一个行内元素里边一样，所以不显示，最后改了icon外边一层的display值以后，图标显示了 ...
微信小程序之 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...
iconfont 微信小程序一些图标
06-15
axure 适用于模拟开发微信小程序
微信小程序引入iconfont图标，解决渲染层失败（2022年7月11日）
只会写bug的靓仔的博客
07-11 910
网上的教程几乎都是清一色的引用阿里云矢量图标的在线链接，可惜现在阿里现在已经没有在线链接了。然后我吧文件下载到本地尝试引用，抱歉woff文件识别不了，微信小程序是没法直接识别woff文件的，通通渲染层报错。 原因是：。 一个折中的解决方法是把放到wxss文件中。 这对于图标来说还是足够了。 把下载的字体文件转换成base64，我这里是用的woff2转换的 https://transfonter.org/ 记得把base64打开在这里插入图片描述 然后就可以显示出来了......
15、前端开发：CSS知识总结——iconfont图标库用法
不迁怒，不贰过。小知识，大智慧。
08-21 5281
iconfont图标库用法
crmeb单商户pro1.5一键换色
CRMEB小程序商城的博客
08-18 553
在原有的五套主题色调上增加： 一、后台设置： 路径：crmeb1.5\src\pages\setting\themeStyle 例如：添加一个青色主题色调的 <Radio :label="6" border class="box orange">青色<i class="iconfont iconxuanzhong6"></i></Radio> 对应下面显示的效果图你可以在前台截取，在data里面提前定义，如图： 对应的切换效果定义（将你data里面新定
crmeb单商户java版安装_前端配置说明 · CRMEB 单商户Java版 帮助文档 · 看云
weixin_31702225的博客
02-25 438
# :-: 前端添加页面### 侧边栏菜单 sider.js 配置侧边菜单一般较多，所以建议拆分模块，便于维护。仍然以上一篇的`dashboard`为例，创建文件`src/menu/modules/dashboard.js`：~~~// src/menu/modules/dashboard.jsconst pre = '/dashboard/';export default {path: '/da...
CRMEB小程序商城源码安装后，个人中心推广海报不显示处理方法！
weixin_43831547的博客
04-27 2093
CRMEB V2.6小程序商城源码或者打通版商城源码，安装成功后，个人中心推广海报无法展现处理方法！ 1.个人中心海报打开提示 “生成图片时，系统错误” 并返回 imagettftext(): Could not read font 错误？ 解答：imagettftext本函数同时需要 GD 库和 » FreeType 库， FreeType库版本目前测试低于2.4的都会报错，解决方法暂时...
CRMEB移动端前端目录结构
sugar1569的专栏
03-22 1693
CRMEB前端目录结构 └─view uni-app存放根目录 ├─api 接口统一存放目录 │ ├─activity.js 活动接口 │ ├─admin.js 后台订单管理接口 │ ├─api.js 公共接口 │ ├─order.js 订单接口 │ ├─public.js 授权分享接口 │ ├─store.js 产品接口 │ └─user.js 用户接口 ├─components 组件目录 │ ├─addressWindow 地址组件 │ ├─countDown 倒计时组件 │ ├─couponListW
[超详细]微信小程序使用iconfont教程及解决真机无法显示问题
zhazhashuai1999的博客
08-19 4066
在iconfont官网创建自己的项目 选择自己需要的图标加入'购物车',然后在'购物车'页面点击添加至项目,没有项目的话点击新建项目.
微信小程序iconfont在子组件中不显示
小柒的博客
03-22 3108
原因： 微信小程序的子组件属于独立模块，独立模块需要使用iconfont时需要将iconfont引入独立模块的样式文件中 解决方法 为独立模块的样式文件.wxs引入iconfont @import "/iconfont.wxss" 注： 使用iconfont的元素必须添加iconfont类名 ...
微信小程序 iconfont
05-17
要在微信小程序中使用 iconfont，你需要先在iconfont网站上找到你需要的图标，并下载对应的字体文件。然后，在微信小程序开发工具中创建一个新的目录，将字体文件放在该目录下。接下来，在微信小程序开发工具中打开 app.wxss 文件，并导入字体文件，示例代码如下： ```css @font-face { font-family: 'iconfont'; src: url('./iconfont.ttf') format('truetype'); } /* 使用方式 */ .iconfont { font-family: "iconfont"; font-size: 40rpx; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` 最后，在需要使用图标的地方，使用 `<text>` 或 `<icon>` 标签，并设置对应的类名即可，示例代码如下： ```html <text class="iconfont"></text> ``` 其中，`` 是字体文件中对应图标的编码。 需要注意的是，不同的字体文件可能有不同的编码，需要根据具体的文件来进行设置。另外，如果你想要使用更多的图标，可以在iconfont网站上搜索并下载对应的字体文件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值