UniApp小程序引入iconfont字体图标(阿里巴巴矢量图标库)

本文主要是介绍UniApp小程序引入iconfont字体图标(阿里巴巴矢量图标库),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

小程序使用icon图标

uniapp在H5运行是可以的,但在小程序中会出错

1.在iconfont官网选择自己需要的图标,添加至项目中

2.打开项目设置

3.下载

只需要这段代码


.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-youjiantou:before {content: "\e658";
}.icon-a-44tubiao-14:before {content: "\e692";
}

4.打开在线生成器

在线@font面生成器 — Transfonter

5.打开Base64编码

6.点击下载

7.下载之后解压,打开解压的文件夹,里面有个stylesheet.css文件

8.打开这个stylesheet.css文件

9.复制这个代码,放在刚才复制的代码的上面

@font-face {font-family: 'iconfont';src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAK4AA4AAAAABkwAAAJgAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GVgCCUggEEQgKgXCBWgsMAAE2AiQDEgQgBYMVB0UbLQVRlA3GWLKPhNzE6iUYLIs2eU0TLugIqjWqrB7YOQBCeYrYIgpz/MRCASkkB6w+Yvynub2/UcXzRexuJgkteebgmZYonRaY/5txRRF8AG8JrKFZNsG2ZzLGet7z4xMM0A+MbnDecEFVSDqEgG/KwQcAvn/p5kJ6XgWhKdqDJGRyIUdCVOKqgmJMcY/oDr4o+1SeJpAUGQAtAcDK/ecUu182/nK9Qc0bZa1GADJk6IrAUrJAVz0jQaWSoHakrsV/cDo96fQAARAlAYiEBAAIyufPLcYg6loCBWiMHCPAAgA5hpNAiEiet27X5ESLY7ubNWp64vjj8x+fXR07+vDsJ00uDDnx5NyxxucHH358bsiRJ+GGT5xdHjz06OzHcxXresoNX865+8FdsWvP8kltrtVbKMacM5fEHZYPr+OJW224uiL6P/7zz8fLDcODvv339+97/HkFC89bB14kI6a+1JD7VX+xLL7y0CxhSbAMF1gGXcb/PBJvDgTv9L+/H7SY+m/VpDKWf//cmsrxZW0blQSCsq7DGxUoxyMAQF4xF6hQiXfTYIRCOxJICIGZBICmbgsQKq0RSBoMQSDTzweBXOV1AQpNfIZAqfKfTOSNhJbgg6S5LiCzmAFyLX1Bob3f2lJLf5XE1UXu6uIFyw6xLA4Dq2UKb63IA34uE4D5xQj7zQ+FDKMTVIyPNUelrNO5OI2O06l0Bjy/xPSSR5ExXajMZx3jnk53uabzndo1Bgit1x6eqmQnoxFUuEnF14Ra1Uua9DcLhBQpssbHru+6ii6v67sfcdN8veOQeuWaCQAA') format('woff2'),url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAAASsAA4AAAAABkwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEkAAAABsAAAAcoWtStUdERUYAAARwAAAAHgAAAB4AKQALT1MvMgAAAbgAAABGAAAAVkpAZQtjbWFwAAACFAAAAEMAAAFS5m3qZWN2dCAAAAJYAAAABAAAAAQARAURZ2FzcAAABGgAAAAIAAAACP//AANnbHlmAAACaAAAAOQAAADw/atPR2hlYWQAAAFEAAAAMgAAADYo/nNDaGhlYQAAAXgAAAAdAAAAJA3vBwZobXR4AAACAAAAABIAAAASGioCDmxvY2EAAAJcAAAADAAAAAwAfADQbWF4cAAAAZgAAAAfAAAAIABJAEZuYW1lAAADTAAAAOUAAAGVyRaNxXBvc3QAAAQ0AAAAMQAAAEVVbgrEeNpjYGRgYADiM7z30+L5bb4ycHMwgMDDTVPEoLQBg8t/RjYztv9ALgcDE0gUADenCvYAAHjaY2BkYGD7/5+RYQcHAwiwmTEwMqACFgBWrgMIAAAAeNpjYGRgYGBlEGVgYgABEMnIABJzYNADCQAABeEAkAB42mNg5GBgnMDAysDAasw6k4GBUQ5CM19nSGMSYmBgYmBlZoADAQSTISDNNYXB4VnEs0nsDP8ZGHaw/QdRDIwgOQCTugvxAAAIAABEAAAAAAgAAAAIAAHKAioAAHjaY2BgYGaAYBkGRgYQ8AHyGMF8FgYDIM0BhEwgiWcRzyb9/4/MklwtWQTVBQaMbAxwLiNIDxMDKmBkGPYAAALDC5wAAEQFEQAAACwALAAsAFAAeHjaFYyxTsMwGITvt2tHWZAimVDJi1OCkZAoUlIlS4YMGVHI0qmMDGzMPEY33oGFZO4TILEy8QosjChpai+f7r6TDgwNwJ7EFhwB1j3hrhqCBX6zXoqfauDMRfTca+H1EEgaq4G8z6MkukqipGHmmNLb8Vls/9+bxRcAos+ZZCFnREBIdiXVRUhSxXlWUrGR8fhidrXhzXgw9e3a8L3hrUO9M+PBOb/tzSOI3cy9+Jb3UIC4XF2T3biDPIvPVRBSrKR4JaunM63Zn05tuZw69qGLB19bh2VpUz11U6fbAjgBs1I6FnjafY4xTgMxEEXfJptABEKIIg2NG6poV16niXKAFJQU6aPIWa0UrSWH1NyCG3AGWo7BATgDNd/BNBSxNJ7n8Z/5A1zzSkE6BZfcZR5wwSzzkAdeMpfSvGceccVn5rHq31IW5USV21NX4gE33Gce8sg8cynNW+YRUz4yj1X/omNLoGd3up+h24Z+F3rRE56WI3s2RD19e9xvBKssTTlK4TE4aqzyUvF/5G/VsaCiUa4UVjHXKBmtQmy9cbU1S/NnLnSLqnGVs06yM0uuZR85SJK+jAzSIqx9PHShN01tz7X/ACf6PgQAAAB42mNgYkAGjAzogBUsysTIxMjMVZlfmpWZmFeSX8qbqGtiUlKalJmYr2toAgB2HwiNAAAAAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABAABAAQAAAACAAAAAHjaY2BgYGQAgntsWnkg+uGmKWJQ2gAAO/MGEgA=') format('woff'),url('iconfont.ttf') format('truetype');font-weight: normal;font-style: normal;font-display: swap;
}

10.手动引入

@import "/iconfont.wxss";

11.运行效果

这篇关于UniApp小程序引入iconfont字体图标(阿里巴巴矢量图标库)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/562575

相关文章

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

macOS无效Launchpad图标轻松删除的4 种实用方法

《macOS无效Launchpad图标轻松删除的4种实用方法》mac中不在appstore上下载的应用经常在删除后它的图标还残留在launchpad中,并且长按图标也不会出现删除符号,下面解决这个问... 在 MACOS 上,Launchpad(也就是「启动台」)是一个便捷的 App 启动工具。但有时候,应

一文教你Python引入其他文件夹下的.py文件

《一文教你Python引入其他文件夹下的.py文件》这篇文章主要为大家详细介绍了如何在Python中引入其他文件夹里的.py文件,并探讨几种常见的实现方式,有需要的小伙伴可以根据需求进行选择... 目录1. 使用sys.path动态添加路径2. 使用相对导入(适用于包结构)3. 使用pythonPATH环境

如何用java对接微信小程序下单后的发货接口

《如何用java对接微信小程序下单后的发货接口》:本文主要介绍在微信小程序后台实现发货通知的步骤,包括获取Access_token、使用RestTemplate调用发货接口、处理AccessTok... 目录配置参数 调用代码获取Access_token调用发货的接口类注意点总结配置参数 首先需要获取Ac

Python批量调整Word文档中的字体、段落间距及格式

《Python批量调整Word文档中的字体、段落间距及格式》这篇文章主要为大家详细介绍了如何使用Python的docx库来批量处理Word文档,包括设置首行缩进、字体、字号、行间距、段落对齐方式等,需... 目录关键代码一级标题设置  正文设置完整代码运行结果最近关于批处理格式的问题我查了很多资料,但是都没

基于Python实现一个PDF特殊字体提取工具

《基于Python实现一个PDF特殊字体提取工具》在PDF文档处理场景中,我们常常需要针对特定格式的文本内容进行提取分析,本文介绍的PDF特殊字体提取器是一款基于Python开发的桌面应用程序感兴趣的... 目录一、应用背景与功能概述二、技术架构与核心组件2.1 技术选型2.2 系统架构三、核心功能实现解析

基于Python开发PDF转Doc格式小程序

《基于Python开发PDF转Doc格式小程序》这篇文章主要为大家详细介绍了如何基于Python开发PDF转Doc格式小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用python实现PDF转Doc格式小程序以下是一个使用Python实现PDF转DOC格式的GUI程序,采用T

Python使用PIL库将PNG图片转换为ICO图标的示例代码

《Python使用PIL库将PNG图片转换为ICO图标的示例代码》在软件开发和网站设计中,ICO图标是一种常用的图像格式,特别适用于应用程序图标、网页收藏夹图标等场景,本文将介绍如何使用Python的... 目录引言准备工作代码解析实践操作结果展示结语引言在软件开发和网站设计中,ICO图标是一种常用的图像

将java程序打包成可执行文件的实现方式

《将java程序打包成可执行文件的实现方式》本文介绍了将Java程序打包成可执行文件的三种方法:手动打包(将编译后的代码及JRE运行环境一起打包),使用第三方打包工具(如Launch4j)和JDK自带... 目录1.问题提出2.如何将Java程序打包成可执行文件2.1将编译后的代码及jre运行环境一起打包2

在不同系统间迁移Python程序的方法与教程

《在不同系统间迁移Python程序的方法与教程》本文介绍了几种将Windows上编写的Python程序迁移到Linux服务器上的方法,包括使用虚拟环境和依赖冻结、容器化技术(如Docker)、使用An... 目录使用虚拟环境和依赖冻结1. 创建虚拟环境2. 冻结依赖使用容器化技术(如 docker)1. 创