解决uniapp引入字体图标不显示问题

1 不显示示例

不显示时iconfont.css文件核心代码

第一种情况（下载后的默认代码）
第二种情况

2 解决办法
将上图示核心代码替换为（注意括号内前后都有单引号，需将base64解码内容替换为你自己的，博客下方有解码方法）：

src: url('data:application/x-font-woff2;charset=utf-8;base64, AAEAAAALAIAAAwAwR.....');  /*AAEAAAALAIAAAwAwR......   是base64解码内容*/

3 解码方法
移步 base64对iconfont.ttf文件解码方法
4 参考博客
磁力链

解决uniapp引入字体图标不显示问题相关推荐

uniapp引入字体图标库
步骤 1.首先在项目文件夹的src目录下新建一个styles文件夹,将字体图标文件放到其中iconfont.wxss 2.在App.vue中的标签中全局引入字体图标文件 ``` 3.这样就完成了字体图 ...
uniapp引入字体图标（手机端无法显示）
一.在iconfont官网下载字体图标: 选择第二个进行下载,不然会导致手机端无法显示二.下载好的文档解压好后,放入static中: 三.将文件夹名字改成font 四.在App.vue中引入代码如下 ...
uni-app 阿里字体图标不显示问题
都加上https: 即可
Chrome 对于 glyphicon 字体图标不显示的解决办法
在将Chome默认字体渲染为微软雅黑后,部分字体图标显示为方框,这里Chome扩展文档提供的解决办法为: 找到 custom.css 文件,路径为: C:\Users\(用户名)\AppData\L ...
BootStrap字体图标不显示、下拉菜单不显示
在W3CSchool学习BootStrap教程时遇到的问题-- 1.字体图标不能显示上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...
小程序以及h5引入阿里图标不显示最简单解决方案
小程序项目,按照老方法,图标部分手机不显示,经理炸毛,自己也头痛,网上搜了一大堆方法,有转化base64的,还有其他各种的,感觉太麻烦了也不好用,本人就讨厌麻烦,直男程序员一枚,今天花时间,认真研究了 ...
uniapp引入阿里图标
uniapp引入阿里图标: uniapp引入自定义阿里图标库后在手机端不显示图标跟着我做: 第一步: 第二步: 第三步: 是的,你没看错,这样操作不太行,确实没有图标s #学习时间(正确): 第一步 ...
引入字体图标的三种方式
@引入字体图标的三种方式TOC Unicode引用 fontclass引用 symbol引用--此种引用方式支持多色图标字体包: 1.icomoon字库https://icomoon.io/ 2.阿 ...
vue-cli打包apk iconfont字体图标不显示问题
vue移动端项目打包apk,发现iconfont字体图标不显示,第一反应是引用的文件路径不对: 在网上查找资料后,解决方法: 找到build>utils.js文件,如图所示位置加上publicP ...

解决uniapp引入字体图标不显示问题

解决uniapp引入字体图标不显示问题相关推荐

最新文章

热门文章