uniapp-uView-u-icon在离线状态下无法显示icon图标的问题

问题现象：

uniapp使用uView时在线状态下icon显示正常，离线状态下出现icon无法正常加载显示。

原因：

uView中集成的icon使用的是在线地址，所以在离线状态下会出现无法加载的问题

解决方案：

方案一：

1、下载引用的ttf文件：at.alicdn.com/t/font_2225…

将uView包中的u-icon ===》u-icon.vue中icon在线引用地址修改为本地文件引用地址。

uview-ui下的u-icon.vue 配置文件，一般目录在 uni_modules\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');
　　// 本地文件引用
　　src: url('./font_2225171_8kdcwk4po24.ttf')format('truetype');
}

替换引用地址完成后，重新编译运行即可。

方案二：

将uView包中的u-icon ===》u-icon.vue中icon在线引用地址修改为本地生成的base64格式的引用地址。

**

@font-face {
    font-family: 'uicon-iconfont';
    src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf')format('truetype');
}

本地生成方法：

1、下载引用的ttf文件：at.alicdn.com/t/font_2225…

2、在线转换base64：transfonter.org/

 

 3、将生成的文件解压，获得以下问价，打开stylesheet.css文件

 

4、将文件的src地址复制出来，替换掉包中的引用地址，重新编译运行即可。