微信小程序使用 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" />

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Django高级之-cookie-session-token

Django高级之-cookie-session-token 发展史 1、很久很久以前&#xff0c;Web 基本上就是文档的浏览而已&#xff0c; 既然是浏览&#xff0c;作为服务器&#xff0c; 不需要记录谁在某一段时间里都浏览了什么文档&#xff0c;每次请求都是一个新的HTTP协议&#xff0c; 就是请…

大数据 - Spark系列《十二》- 名词术语理解

Spark系列文章&#xff1a; 大数据 - Spark系列《一》- 从Hadoop到Spark&#xff1a;大数据计算引擎的演进-CSDN博客 大数据 - Spark系列《二》- 关于Spark在Idea中的一些常用配置-CSDN博客 大数据 - Spark系列《三》- 加载各种数据源创建RDD-CSDN博客 大数据 - Spark系列《…

redis介绍和使用

Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的内存数据结构存储系统&#xff0c;它以键-值对&#xff08;key-value&#xff09;的形式存储数据。Redis支持多种数据结构&#xff0c;包括字符串、哈希表、列表、集合、有序集合等。Redis的特点是高性能、高…

C语言游戏实战(11):贪吃蛇大作战(多人对战)

前言&#xff1a; 这款贪吃蛇大作战是一款多人游戏&#xff0c;玩家需要控制一条蛇在地图上移动&#xff0c;吞噬其他蛇或者食物来增大自己的蛇身长度和宽度。本游戏使用C语言和easyx图形库编写&#xff0c;旨在帮助初学者了解游戏开发的基本概念和技巧。 在开始编写代码之前…

是否可以在HTTP中缓存POST方法

如果您想知道是否可以缓存post请求&#xff0c;并尝试研究该问题的答案&#xff0c;那么您很可能不会成功。当搜索“缓存post请求”时&#xff0c;第一个结果是这个StackOverflow问题。 答案是令人困惑的&#xff0c;包括缓存应该如何工作&#xff0c;缓存如何根据RFC工作&…

RDD算子介绍(二)

1. coalesce 用于缩减分区&#xff0c;减少分区个数&#xff0c;减少任务调度成本。 val rdd : RDD[Int] sc.makeRDD(List(1, 2, 3, 4), 4) val newRDD rdd.coalesce(2) newRDD.saveAsTextFile("output") 分区数可以减少&#xff0c;但是减少后的分区里的数据分布…

代码随想录算法训练营Day41 ||leetCode 0-1背包问题 || 416. 分割等和子集

0-1背包问题 dp[i][j]的含义&#xff1a;从下标为[0-i]的物品里任意取&#xff0c;放进容量为j的背包&#xff0c;价值总和最大是多少。 那么可以有两个方向推出来dp[i][j]&#xff0c; 不放物品i&#xff1a;由dp[i - 1][j]推出&#xff0c;即背包容量为j&#xff0c;里面不放…

02-app端文章查看,静态化freemarker,分布式文件系统minIO-黑马头条

app端文章查看&#xff0c;静态化freemarker,分布式文件系统minIO 1)文章列表加载 1.1)需求分析 文章布局展示 1.2)表结构分析 ap_article 文章基本信息表 ap_article_config 文章配置表 ap_article_content 文章内容表 三张表关系分析 1.3)导入文章数据库 1.3.1)导入数据…

详解@Configuration

简介 Configuration注解用于标识一个类作为Spring的配置类&#xff0c;从而允许使用纯Java代码的方式来定义Bean和Bean之间的依赖关系。 Configuration注解是Spring框架中非常核心的一个功能&#xff0c;它提供了一种替代XML配置文件的方法。通过该注解&#xff0c;开发人员可…

ROS2从入门到精通0-2:ROS2简介、对比ROS1与详细安装流程

目录 0 专栏介绍1 什么是机器人操作系统&#xff1f;2 ROS的发展历程3 ROS2与ROS1的区别4 ROS2安装4.1 基本安装4.2 测试ROS24.2.1 测试一&#xff1a;发布者与订阅者4.2.2 测试二&#xff1a;海龟仿真器 5 常见问题 0 专栏介绍 本专栏旨在通过对ROS2的系统学习&#xff0c;掌…

信息系统项目管理师--成本管理

项⽬成本管理重点关注完成项⽬活动所需资源的成本&#xff0c;但同时也考虑项⽬决策对项⽬产品、服务或成果的使⽤成本、维护成本和⽀持成本的影响。不同的⼲系⼈会在不同的时间&#xff0c;⽤不同的⽅法 测算项⽬成本。 就某些项⽬&#xff0c;特别是⼩项⽬⽽⾔&#xff0c;成…

FocusVisualStyle通常是键盘焦点样式

设置了Button的FocusVisualSytle但是死活没有效果&#xff0c;查了一下这个是键盘焦点样式&#xff0c;摁下Tab键了才能让Button有焦点 <ButtonWidth"100"Height"30"FocusVisualStyle"{DynamicResource MyFocusVisual}">按钮1 </Butto…

VSCode报错:/bin/sh: python: command not found

背景 以前都是直接用txt写python&#xff0c;然后直接命令行运行。 这次涉及的代码较多&#xff0c;决定用编译器。 写好的一段python点击运行报错&#xff01; 问题描述 因为我本地安装的是python3&#xff0c;但是vscode用的是另一个路径的python&#xff0c;所以找不到 解决…

_note_04_02

1&#xff1a;输出1-20之间的奇数。 package _09142023.homework_04;import java.util.Scanner;/**** 输出1-20之间的奇数。**/ public class _07_1 {public static void main(String[] args) {System.out.println("1到20之间的奇数&#xff1a;");for (int i 1; i…

视觉语言处理:用Transformer桥接视觉与语言

引言 人工智能研究的前沿领域见证了显著的交叉融合。将计算机视觉和自然语言处理的领域融合&#xff0c;问题随之而来&#xff1a;AI能否直接从其视觉表现&#xff0c;即从原始像素中辨识和理解语言&#xff1f;在这篇博客中&#xff0c;我试图探究AI从图像中直接理解自然语言的…

在 Android 上恢复已删除文件的 5 种简单方法

您可能会因为意外删除、未完成的 Android 更新、手机意外关机等原因而丢失 Android 上的重要数据。新技术的发展使许多手机功能或程序能够从内部恢复丢失的数据。 在 Android 上恢复已删除文件的 5 种简单方法 然而恢复成功率的不确定性也成为人们克服数据丢失困境的重要考虑因…

Android14音频进阶:AudioTrack与AudioFlinger创建数据通道(五十八)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒体系统工程师系列【原创干货持续更新中……】🚀 人生格言: 人生从来没有捷径,只…

子类和父类不在同一包中的继承性

不同包中的继承性 继承父类的protected 、public 成员变量 继承父类的 protected 、public 方法&#xff1b; 继承的成员或方法的 。 public class People { int age,leg 2,hand 2; public void showPeopleMess() { System.out.printf("%d岁&#xff0c;%d只脚,%d只手…

[Spring] IoC 控制反转和DI依赖注入和Spring中的实现以及常见面试题

目录 1. 什么是Spring 2.什么是IoC容器 3.通过实例来深入了解IoC容器的作用 3.1造一量可以定义车辆轮胎尺寸的车出现的问题 3.2解决方法 3.3IoC优势 4.DI介绍 5.Spring中的IoC和DI的实现 5.1.存对象 5.1.2 类注解 5.1.3 方法注解 5.2取对像 (依赖注入) 5.2.1.属性…

FPGA高端项目:FPGA基于GS2971的SDI视频接收+HLS多路视频融合叠加,提供1套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本方案的SDI接收转HDMI输出应用本方案的SDI接收图像缩放应用本方案的SDI接收纯verilog图像缩放纯verilog多路视频拼接应用本方案的SDI接收HLS图像缩放Video Mixer多路视频拼接应用本方案的SDI接收OSD动态字符叠加…