Comment résoudre le problème selon lequel l'icône Uni ne s'affiche pas sur l'application

Solutions pour que l'icône Uni ne s'affiche pas sur l'application : 1. N'utilisez pas la syntaxe vue qui n'est pas prise en charge par les terminaux non-H5 ; 2. Écrivez les styles à l'intérieur du composant ; 3. Modifiez le chemin "url(https:/ /alicdn.net)" ; 4. Utilisez l'adresse IP accessible par le téléphone mobile pour effectuer des tests réseau.

L'environnement d'exploitation de cet article : système Windows 7, uni-app version 2.5.1, ordinateur DELL G3

L'icône uni ne s'affiche pas sur l'application ?

uniapp introduit les icônes iconfont et résout le problème de l'affichage des icônes sur les appareils réels

1 Comment introduire les icônes iconfont dans uniapp

1. Téléchargez d'abord le fichier de projet à partir du site Web iconfont. Comme indiqué sur l'image :

2. Décompressez le fichier iconfont téléchargé, prenez iconfont.css et placez-le dans le répertoire de votre projet

3. , cliquez pour copier le code, Tout ce dont vous avez besoin est l'adresse au format ttf

4 Ouvrez le fichier iconfont.css dans le projet et écrivez le code au format ttf copié dans @font-face, comme. suit :

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

5. Enfin, introduisez iconfont.css dans la balise de style d'App.vue

6.

2. Résolvez le problème de la police d'icônes qui ne s'affiche pas sur l'appareil réel

Problème : après l'opération ci-dessus, l'icône de la police d'icônes s'affiche normalement dans H5, mais lors du débogage sur l'application de l'appareil réel, elle est trouvée que l'affichage de l'icône n'est pas réussi.

Solution : Lien officiel : https://uniapp.dcloud.io/matter

1 La syntaxe vue qui n'est pas prise en charge par le côté non-H5 est utilisée, et la méthode d'écriture est limitée par le mini. les composants personnalisés du programme. Pour plus de détails, voir

2. N'écrivez pas directement style="xx" sur l'attribut du composant où le composant est référencé. Écrivez le style à l'intérieur du composant

3. /alicdn.net) à l'url(https:// alicdn.net), car // du côté de l'application se trouve un protocole de fichier

4 De nombreuses personnes utilisent l'adresse du service de test local (localhost ou 127.0.0.1) lors de la connexion à. du côté H5. Une telle adresse réseau n'est pas accessible du côté de l'application mobile. Veuillez utiliser une IP accessible depuis votre téléphone pour vous connecter à Internet

@font-face {
　　font-family: "iconfont";
　　src: url('//at.alicdn.com/t/font_2277759_0seoqjijl89r.ttf') format('truetype');
}// 改为这样即可：@font-face {
　　font-family: "iconfont";
　　src: url('https://at.alicdn.com/t/font_2277759_0seoqjijl89r.ttf') format('truetype');
}

Apprentissage recommandé : "tutoriel uni-app"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!