uview u-icon图标显示方框 或 图标不显示
1. 先检查自己的项目中是否存在指定字体类型的地方
我这里是在全局指定了字体类型,导致覆盖了uview的字体
*{
font-family: PingFangSC, PingFang SC;
}
把它注释掉就能解决图标显示方框的问题。
至于这个注释掉的字体,就只能换种方法配置了,不要影响到uview的图标字体就行。
2. 如果不是上述问题,那就到u-icon.vue中把字体下载下来转换成Base64格式
(1)找到路径下uview-ui/components/u-icon/u-icon.vue文件,找到下面这段代码
@font-face {
font-family: 'uicon-iconfont';
src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype');
}
(2)把这个字体 https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf 下载下来
(3)利用这个网站 https://transfonter.org/ 把这个字体转成Base64

(4)将转换成功的文件下载下来并解压,然后复制stylesheet.css里url内的内容。到(1)的同一位置,把字体链接的内容替换掉。
解压后的文件列表:

stylesheet.css要复制的内容:(内容很长)

替换之后:

(5)保存并重启项目即可。

浙公网安备 33010602011771号