Apprenez étape par étape à utiliser les icônes de police dans les mini-programmes

青灯夜游
Libérer: 2021-11-05 10:43:40
avant
4841 Les gens l'ont consulté

Comment utiliser les icônes de police dans les mini-programmes ? L'article suivant prendra comme exemple une certaine icône vectorielle Alibaba pour vous présenter comment utiliser les icônes de police dans les mini-programmes. J'espère que cela vous sera utile !

Apprenez étape par étape à utiliser les icônes de police dans les mini-programmes

Dans le processus de développement des mini-programmes WeChat, l'utilisation d'icônes est très courante et courante. Dans des circonstances normales, dans le répertoire images du projet d'applet WeChat, vous pouvez directement référencer le fichier d'icône local. Cependant, lorsque vous définissez l'image d'arrière-plan à l'aide de l'icône de police ou de l'arrière-plan, vous n'avez pas besoin de référencer le fichier d'icône local. Vous ne pouvez utiliser que le lien URL. La police ou l'image de l'adresse, ou le format après avoir codé l'icône ordinaire en base64. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes]

Cet article de blog expliquera donc comment utiliser les icônes de police dans les projets de mini-programme WeChat et comment convertir l'URL de la police au format base64 avant de l'utiliser. Ce cas utilise une certaine bibliothèque d'icônes vectorielles Alibaba comme exemple. Les opérations spécifiques sont les suivantes.

Étapes de fonctionnement

1. Ouvrez d'abord le site officiel de la bibliothèque d'icônes vectorielles Alibaba, puis recherchez l'icône que vous souhaitez, puis cliquez pour sélectionner le bouton « Ajouter à la bibliothèque »

Apprenez étape par étape à utiliser les icônes de police dans les mini-programmes

Apprenez étape par étape à utiliser les icônes de police dans les mini-programmes

2. Faire du shopping Recherchez la police que vous avez ajoutée, cliquez sur Sélectionner et sélectionnez le bouton « Ajouter au projet » dans la barre de menu inférieure

Apprenez étape par étape à utiliser les icônes de police dans les mini-programmes

3 Cliquez sur le bouton « + » dans le coin supérieur droit, puis entrez le nom du projet ; et cliquez sur le bouton "OK"

Apprenez étape par étape à utiliser les icônes de police dans les mini-programmes

Apprenez étape par étape à utiliser les icônes de police dans les mini-programmes

4. Ensuite, allez dans le projet nouvellement créé pour trouver la police ajoutée, puis cliquez pour la sélectionner, et cliquez sur le bouton "Télécharger vers local" pour la télécharger. l'ordinateur local ;

Apprenez étape par étape à utiliser les icônes de police dans les mini-programmes

Apprenez étape par étape à utiliser les icônes de police dans les mini-programmes

Apprenez étape par étape à utiliser les icônes de police dans les mini-programmes

5. Recherchez le fichier de police téléchargé sur l'ordinateur local, puis ouvrez le fichier, ouvrez le fichier iconfont.css à l'intérieur, puis copiez directement l'URL et la méthode iconfont, tous les styles, et collez-le directement dans le wxss qui doit utiliser l'icône de police Dans le fichier

Apprenez étape par étape à utiliser les icônes de police dans les mini-programmes

Apprenez étape par étape à utiliser les icônes de police dans les mini-programmes

1Apprenez étape par étape à utiliser les icônes de police dans les mini-programmes

1Apprenez étape par étape à utiliser les icônes de police dans les mini-programmes6 Enfin, appelez-le dans le fichier wxml en utilisant l'icône de police.

1Apprenez étape par étape à utiliser les icônes de police dans les mini-programmesEnfin

Le cas ci-dessus est expliqué sur la base d'une certaine bibliothèque d'icônes vectorielles Alibaba. Il existe de nombreuses plates-formes de sites Web pour convertir les icônes de police, donc les autres plates-formes ne seront pas présentées une par une. d'autres plateformes. C'est la méthode d'utilisation des icônes de police dans le développement de l'applet WeChat dans cet article. Je la partagerai avec ceux qui en ont besoin et n'entrerai pas dans les détails ici.

Pour plus de connaissances liées à la programmation, veuillez visiter :

Enseignement de la programmation

 ! !

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!

Étiquettes associées:
source:juejin.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal