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

相关文章

golang程序打包成脚本部署到Linux系统方式

《golang程序打包成脚本部署到Linux系统方式》Golang程序通过本地编译(设置GOOS为linux生成无后缀二进制文件),上传至Linux服务器后赋权执行,使用nohup命令实现后台运行,完... 目录本地编译golang程序上传Golang二进制文件到linux服务器总结本地编译Golang程序

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

《苹果macOS26Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色》在整体系统设计方面,macOS26采用了全新的玻璃质感视觉风格,应用于Dock栏、应用图标以及桌面小部件等多个界面... 科技媒体 MACRumors 昨日(6 月 13 日)发布博文,报道称在 macOS 26 Tahoe 中

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

python编写朋克风格的天气查询程序

《python编写朋克风格的天气查询程序》这篇文章主要为大家详细介绍了一个基于Python的桌面应用程序,使用了tkinter库来创建图形用户界面并通过requests库调用Open-MeteoAPI... 目录工具介绍工具使用说明python脚本内容如何运行脚本工具介绍这个天气查询工具是一个基于 Pyt

Ubuntu设置程序开机自启动的操作步骤

《Ubuntu设置程序开机自启动的操作步骤》在部署程序到边缘端时,我们总希望可以通电即启动我们写好的程序,本篇博客用以记录如何在ubuntu开机执行某条命令或者某个可执行程序,需要的朋友可以参考下... 目录1、概述2、图形界面设置3、设置为Systemd服务1、概述测试环境:Ubuntu22.04 带图

Python程序打包exe,单文件和多文件方式

《Python程序打包exe,单文件和多文件方式》:本文主要介绍Python程序打包exe,单文件和多文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python 脚本打成exe文件安装Pyinstaller准备一个ico图标打包方式一(适用于文件较少的程

使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)

《使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)》字体设计和矢量图形处理是编程中一个有趣且实用的领域,通过Python的matplotlib库,我们可以轻松将字体轮廓... 目录背景知识字体轮廓的表示实现步骤1. 安装依赖库2. 准备数据3. 解析路径指令4. 绘制图形关键

Python程序的文件头部声明小结

《Python程序的文件头部声明小结》在Python文件的顶部声明编码通常是必须的,尤其是在处理非ASCII字符时,下面就来介绍一下两种头部文件声明,具有一定的参考价值,感兴趣的可以了解一下... 目录一、# coding=utf-8二、#!/usr/bin/env python三、运行Python程序四、

无法启动此程序因为计算机丢失api-ms-win-core-path-l1-1-0.dll修复方案

《无法启动此程序因为计算机丢失api-ms-win-core-path-l1-1-0.dll修复方案》:本文主要介绍了无法启动此程序,详细内容请阅读本文,希望能对你有所帮助... 在计算机使用过程中,我们经常会遇到一些错误提示,其中之一就是"api-ms-win-core-path-l1-1-0.dll丢失