What to do if the uniapp font icon is not displayed

With the continuous development of mobile applications, uniapp has become more and more widely used as a cross-terminal application development framework. The ordinary icons and font icons it supports also bring more flexibility to our applications. Scalability and customizability. However, during development, sometimes we encounter the problem that the uniapp font icon is not displayed. This article will introduce the possible causes and solutions of this problem from the following aspects.

1. The font file is not imported correctly

To use font icons in uniapp, you need to import the font file into the project first. Under normal circumstances, we will place the font files uniformly in static /fonts path. When we use the better-qiuck-entry template to create a project, the template has added iconfont to the project by default. We can see the code related to the font icon by opening the /src/common/uni.scss file. Introduction. But if we are not using this template, or our customized font file name is not uni-icons defined in uni.scss, we need to introduce it manually.

When introducing font files, you need to pay attention to the following points:

1. scss or css The style of the font icon needs to be defined in the file.
2. The path to the folder containing the font files needs to be correct. For example, if we place the font file under static/fonts, we should pay attention to the path when referencing it. It should be /static/fonts/.
3. Remember to recompile and run the project, otherwise the changes will not take effect.

2. The font file does not support the current end and device

The way font icons are rendered on different operating systems and devices may be different. If the font file does not support the current device, it may cause the font icon not to be displayed. For example, if we use a font file format on iOS, it may not be supported on Android devices.

Solution: We can try to download font files in different formats from the website, such as woff, woff2, etc., and quote the corresponding file formats in the page, This allows compatibility with more client devices.

3. The way to introduce the font icon is incorrect

When referencing the font icon in the code, you need to use the <i></i> tag and add the font icon in the tag Name, here we take iconfont as an example, for example:

<i></i>

Among them, iconfont is the font-family attribute, and icon-XXX is One of the class attributes, XXX represents the name of the font icon.

If we write the class attribute in other forms such as ClassName, Icon-ClassName, etc., the font icon will not be displayed.

Solution: Modify the class attribute to the standard icon-XXX form.

4. The unicode value of the font icon is incorrectly used

When referencing the font icon, we have two ways to define the name of the font icon. One is to use the name of the font icon; One is to use the corresponding encoding value of the font icon.

If we use an encoding value and the encoding value is incorrect, the font icon will not be displayed correctly.

Solution: You can use the code finder provided on the official website to find the encoding value of the corresponding icon to ensure that the correct encoding value is used.

5. The font file size is inappropriate

The font file size is too large or too small, which may also cause the font icon not to be displayed. If the font file is too large, it will slow down the loading speed of the application. If there is too much text content, some font files may not be loaded on the mobile terminal. If the font file is too small, the font icon on the mobile device will become blurry.

Solution: We can try to compress and crop the font file to make the file size moderate and improve the display effect of the font icon.

The above are the possible reasons and solutions for the uniapp font icon not displaying. I hope it will be helpful to everyone who encounters similar problems during development!

The above is the detailed content of What to do if the uniapp font icon is not displayed. For more information, please follow other related articles on the PHP Chinese website!