微信小程序使用阿里巴巴矢量图标库正确姿势

news/2024/11/8 6:39:40 标签: 微信小程序, iconfont, css

1、打开官网:https://www.iconfont.cn/,把整理好的图标下载解压。

2、由于微信小程序不支持直接在wxss中引入.ttf/.woff/.woff2(在开发工具生效,手机不生效)。我们需要对下载的文件进一步处理。

  • eot:IE系列专属字体方案,不推荐。
  • svg:不是真的字体,存在很多兼容问题,已经被大部分浏览器抛弃,不推荐。
  • ttf:兼容性好,但是字体文件较大 ,不推荐。
  • woff:W3C标准,兼容性好,推荐。
  • woff2:W3C标准,但是不兼容IE,推荐。

3、我们选择转换.woff2文件为base64,转换地址:File To Base64 Encoder | Convert any file | GiftOfSpeed

4、修改iconfont文件

@font-face {
  font-family: "iconfont"; /* Project id 4737589 */
  src: url("data:font/truetype;charset=utf-8;base64,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")
    format("woff2");
}

5、在app.less引入文件

6、成功展示


http://www.niftyadmin.cn/n/5743449.html

相关文章

Linux grep 使用正则表达式说明

Linux grep 使用正则表达式说明 在 Linux 中使用 grep 时,不同的正则表达式标准可能会导致写法上的差异,尤其是在 符号的使用上。以下是对这些差异的详细说明,以及为什么 符号需要加反斜杠,而中括号 [] 不需要。 1. 不同类型的…

Kafka 源码 KRaft 模式本地运行

KRaft(Kafka Raft Metadata mode),从版本 2.8.0 开始作为测试特性引入,并在后续版本中持续得到改进和增强。 KRaft 模式是指 Kafka 使用 Raft 协议来管理集群元数据的一种运行模式,这标志着 Kafka 向去除对 ZooKeeper …

D365 无法在数据被选择或插入到另一个事务作用域中的缓冲区上调用 NEXT、update() 或 delete()

问题描述 尝试在工作流拒绝操作时,更新WorkflowTrackingStatusTable 上的字段,结果报错:无法编辑WorkflowTrackingStatusTable 中的记录。无法在数据被选择或插入到另一个事务作用域中的缓冲区上调用 NEXT、update() …

【支付行业-支付系统架构及总结】

记得第一次看埃隆马斯克(Elon Musk)讲第一性原理的视频时,深受震撼,原来还可以这样处理复杂的事务。这篇文章也尝试化繁为简,探寻支付系统的本质,讲清楚在线支付系统最核心的一些概念和设计理念。 虽然支付…

《大模型应用开发极简入门》笔记

推荐序 可略过不看。 初识GPT-4和ChatGPT LLM概述 NLP的目标是让计算机能够处理自然语言文本,涉及诸多任务: 文本分类:将输入文本归为预定义的类别。自动翻译:将文本从一种语言自动翻译成另一种语言,包括程序语言。…

Git 测验

Git 测验 引言 Git 是一款强大的分布式版本控制系统,它由Linus Torvalds创建,主要用于帮助多人协作开发项目。Git 的设计目标是速度、数据完整性以及分布式支持。自从2005年发布以来,Git 已经成为全球最流行的版本控制系统之一,被广泛应用于各种规模的软件开发项目中。 …

戴尔R930服务器增加 Intel X710-DA2双万兆光口含模块

老服务器升级增加了内存换了固态盘,想着网卡也升级成万兆光卡吧。插上之后发现服务器能识别,但是安装的esxi7.0.3虚拟化系统重不能识别增加的网卡。在dell官网的知识库中找到https://www.dell.com/support/kbdoc/zh-cn/000194101/how-to-install-vmware-…

基于SpringBoot的社区讯息服务小程序【附源码】

基于SpringBoot的社区讯息服务小程序 效果如下: 系统登陆页面 管理员主页面 用户管理页面 社区活动管理页面 设施报修管理页面 缴费信息管理页面 用户主页面 用户登录页面 社区活动页面 研究背景 随着移动互联网技术的飞速发展,社区生活日益依赖于数字…