The u-icon component of uview reports an error Failed to load local font resource or Failed to load font

Problem: The font icon displays normally in h5, but displays incorrectly in the WeChat applet

Since the legal domain name was set but it still failed, I decided to get it locally directly.

uview imports remote font icons

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

1. Download the font icon file of uview

Resource download | uView 2.0 - uni-app ecological framework fully compatible with nvue - uni-app UI framework (uviewui.com)

 

2. Delete unnecessary font icons

Because it needs to be converted to base64 format, the file should not be too large.

FontEditor (kekee000.github.io)

3. Convert ttf file to base64 file

Encode TTF to base64 in a simple way. | Aspose

 

4. Modify u-icon file

Find the u-icon file

Paste base64 font icon

@font-face {     font-family: 'uicon-iconfont';     src: url('data:application/x-font-woff2;charset=utf-8;base64, converted to base64 characters')          format('truetype' ); }