微信小程序使用 iconfont

base64 形式引入

首先我们点击 iconfont 项目中的 项目设置 按钮,位置如下图所示:

image.png

我们勾选图中所示三种字体格式,选择 base64 是为了将另外两种字体转为 base64 形式,而选择 woffttf 字体原因如下:

  • TTF 兼容性更好,缺点是字体文件体积大;
  • WOFF 与 TTF 字体相比体积小且表现性好;
  • WOFF2 字体是对 WOFF 字体的升级,但兼容性欠佳。

微信的官方文档中也建议选择以上两种字体

建议格式为 TTF 和 WOFF,WOFF2 在低版本的 iOS 上会不兼容。

我们再次下载设置后的字体图标文件,并将 iconfont.css 重命名为 iconfont.wxss,因为下载的文件已将字体转为 base64 格式放入到 iconfont.wxss 中,所以我们只需要将 iconfont.wxss 文件复制到项目中即可,如下图所示:

8.png

虽然 base64 形式会增加约 1/3 的体积,但在少量图标的情况下,我更推荐这种方式引入,增加新图标时也只需要替换该文件即可,且由于会编译到小程序包文件中,不会出现外链形式在弱网或加载失败时图标显示为方框(所有字体找不到对应字符编码文件时都会显示成这样)的问题。

2. 代码示例

字体图标使用很简单,代码如下:

<text class="iconfont icon-xxx" />

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/447313.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【自然语言处理】NLP入门(五):1、正则表达式与Python中的实现(5):字符串常用方法:对齐方式、大小写转换详解

文章目录 一、前言二、正则表达式与Python中的实现1.字符串构造2. 字符串截取3. 字符串格式化输出4.字符转义符5. 字符串常用函数函数与方法之比较 6. 字符串常用方法1. 对齐方式center()ljust()rjust() 2. 大小写转换lower()upper()capitalize()title()swapcase() 一、前言 本…

基于.Net 的图形验证码模块

&#x1f3c6;作者&#xff1a;科技、互联网行业优质创作者 &#x1f3c6;专注领域&#xff1a;.Net技术、软件架构、人工智能、数字化转型、DeveloperSharp、微服务、工业互联网、智能制造 &#x1f3c6;欢迎关注我&#xff08;Net数字智慧化基地&#xff09;&#xff0c;里面…

【探索程序员职业赛道:挑战与机遇】

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

本地部署推理TextDiffuser-2:释放语言模型用于文本渲染的力量

系列文章目录 文章目录 系列文章目录一、模型下载和环境配置二、模型训练&#xff08;一&#xff09;训练布局规划器&#xff08;二&#xff09;训练扩散模型 三、模型推理&#xff08;一&#xff09;准备训练好的模型checkpoint&#xff08;二&#xff09;全参数推理&#xff…

PaddlePaddle框架安装

提示&#xff1a;可在python环境中进行安装&#xff0c;避免环境污染&#xff0c;创建命令conda create -n xxx_name python3.9,激活conda activate xxx_name 第一步&#xff1a;查看计算机平台版本 在窗口输入查看命令&#xff0c;查看CUDA的版本 nvidia-smi 二、根据以下条件…

pycharm连接远程服务器解决远程服务器文件不同步问题

一、pycharm连接远程服务器 1.前提条件 linux已经安装好虚拟环境&#xff0c;并且虚拟环境已经有python的相关环境 conda create -n name python3.10 2.连接服务器 1.进入pycharm的Settings 2.在Project里找Python Interpreter 3.点击⚙&#xff0c;再点击add 4.选择SSH…

【C++从练气到飞升】02---初识类与对象

&#x1f388;个人主页&#xff1a;库库的里昂 ✨收录专栏&#xff1a;C从练气到飞升 &#x1f389;鸟欲高飞先振翅&#xff0c;人求上进先读书。 目录 ⛳️推荐 一、面向过程和面向对象初步认识 二、类的引用 1. C语言版 2. C版 三、类的定义 类的两种定义方式&#xff…

机器学习-04-分类算法-01决策树

总结 本系列是机器学习课程的系列课程&#xff0c;主要介绍机器学习中分类算法&#xff0c;本篇为分类算法开篇与决策树部分。 本门课程的目标 完成一个特定行业的算法应用全过程&#xff1a; 懂业务会选择合适的算法数据处理算法训练算法调优算法融合 算法评估持续调优工程…

如何在Win系统本地部署Jupyter Notbook交互笔记并结合内网穿透实现公网远程使用

文章目录 1.前言2.Jupyter Notebook的安装2.1 Jupyter Notebook下载安装2.2 Jupyter Notebook的配置2.3 Cpolar下载安装 3.Cpolar端口设置3.1 Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 在数据分析工作中&#xff0c;使用最多的无疑就是各种函数、图表、…

【前端系列】CSS 常见的选择器

CSS 常见的选择器 CSS&#xff08;层叠样式表&#xff09;是一种用于描述网页样式的标记语言&#xff0c;它定义了网页中各个元素的外观和布局。在 CSS 中&#xff0c;选择器是一种用于选择要应用样式的 HTML 元素的模式。选择器允许开发人员根据元素的类型、属性、关系等来选…

【计算机视觉】图像处理算法(其他篇)

来源&#xff1a;《OpenCV3编程入门》&#xff0c;怀念毛星云大佬&#x1f56f;️ 说明&#xff1a;本系列重点关注各种图像处理算法的原理、作用和对比 漫水填充 漫水填充法是一种用特定的颜色填充连通区域&#xff0c;通过设置可连通像素的上下限以及连通方式来达到不同的填…

【零基础学习02】嵌入式linux驱动中原子操作基本实现

大家好,为了进一步提升大家对实验的认识程度,每个控制实验将加入详细控制思路与流程,欢迎交流学习。 今天给大家分享一下,linux系统里面并发与竞争具体实现,操作硬件为I.MX6ULL开发板。 第一:Linux系统并发与竞争简介 linux是一个多任务操作系统,存在多个任务操作同一个…

【SpringBoot框架篇】36.整合Tess4J搭建提供图片文字识别的Web服务

文章目录 简介文件下载引入依赖main函数中使用基于Springboot搭建OCR Web服务配置traineddata路径枚举用到的语种类型定义接口响应的json数据格式封装OCR服务引擎编写web提供服务的接口启动服务并且测试html demo扩展 项目配套代码 简介 Tess4J是一个基于Tesseract OCR引擎的J…

mysql的索引、事务、分库分表问题

1.了解MySQL的索引吗&#xff1f;它为什么使用Btree作为底层&#xff0c;而不是其他呢&#xff1f; 这里我们要谈的是其他数据结构的缺点&#xff0c;然后说说Btree的优点&#xff0c;也就看你对MySQL的Btree与其他数据结构熟不熟悉。 Hash &#xff08;1&#xff09;Hash 索引…

第五十五回 吴用使时迁偷甲 汤隆赚徐宁上山-以102flowers数据集为例训练ResNet50模型

汤隆说我家世代打造兵器&#xff0c;破连环马需要用钩镰枪&#xff0c;我会打造。还需要我的姑表哥&#xff0c;金枪手徐宁&#xff0c;因为他会钩镰枪法。汤隆和吴用商议了请徐宁上山的法子&#xff0c;派石迁去偷徐宁的宝贝雁翎锁子甲。 石迁到了东京&#xff0c;打听到徐宁住…

R语言:多值提取到点

ArcGIS中有相关工具实现多值提取到点的功能&#xff0c;在这里&#xff0c;我将使用R语言进行操作&#xff1a; library(dplyr) library(readxl) library(sf) library(raster)setwd("D:/Datasets") Bio <- stack(paste0("D:/Datasets/Data/worldclim2_1km/…

HTML静态网页成品作业(HTML+CSS)——家乡漳州介绍设计制作(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…

爬虫入门到精通_框架篇16(Scrapy框架基本使用_名人名言的抓取

1 目标站点分析 抓取网站&#xff1a;http://quotes.toscrape.com/ 主要显示了一些名人名言&#xff0c;以及作者、标签等等信息&#xff1a; 点击next&#xff0c;page变为2&#xff1a; 2 流程框架 抓取第一页&#xff1a;请求第一页的URL并得到源代码&#xff0c;进行下…

学校Java的第七天

目录 一、什么是数组 二、作用 三、如何使用数组 1、声明数组变量 2、创建数组 示例&#xff1a; 3、数组的使用 示例&#xff1a; 4、数组的遍历 for循环示例&#xff08;不知道for循环的可以查看我之前发的文章&#xff09; for-each循环&#xff08;也就是增强for…

使用JDBC操作数据库

意志、工作和等待是成功的金字塔的基石。 Will, work and wait are the pyramidal cornerstones for success. 文章目录 JDBC简介&#xff1a;JDBC访问数据库步骤StatementPreparedStatement JDBC简介&#xff1a; 在Java应用程序中&#xff0c;JDBC&#xff08;Java Database…