Lors du développement avec uni-app, les icônes de police sont parfois utilisées pour rendre la page plus belle. La bibliothèque d'icônes Ali est principalement utilisée ici.
1. Téléchargez et placez l'icône de police dans le projet:
Vous pouvez le télécharger directement à partir de la bibliothèque d'icônes de polices Ali.
Placez les six fichiers du fichier décompressé dans le projet. Généralement placé dans le dossier statique
2. Modifiez le fichier iconfont.css:
Ne peut pas être utilisé directement, vous devez d'abord le configurer. Ajoutez ~ @ / static / font / devant iconfont
3. Utilisez les icônes de police globalement:
Si vous souhaitez utiliser l'icône de police dans l'ensemble du projet, vous devez l'importer dans App.vue
<style>
@import url('static/font/iconfont.css');
<style>Pit: Un séparateur doit être ajouté à la fin de la phrase d'introduction; sinon, l'icône de police risque de ne pas s'afficher.
4. Utilisez les icônes de police dans la barre de navigation de l'application:
Vous pouvez aller sur le site officiel uni-app pour voir, il y en a dans la partie framework.
Il peut être configuré dans page.json, il a principalement besoin d'importer le fichier iconfont se terminant par ttf
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh": true,
"app-plus": {
"titleNView": {
"buttons": [{
"type": "none",
"float": "right",
"text": "\ue615 退出",
"fontSize": "12px",
"fontSrc": "/static/font/iconfont.ttf",
"width": "60px"
}, {
"type": "none",
"float": "left",
"text": "检查更新",
"fontSize": "12px",
"width": "60px"
}],
"autoBackButton": false
}
}
}Voici quelques méthodes d'utilisation des icônes de police dans uni-app.