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

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、成功展示

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

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

相关文章

kafka面试题解答(四)

5、消费者组和分区数之间的关系是怎样的? 消费者组数小于等于分区数,消费者组内每个消费者负责消费不同分区的数据,一个分区只能由一个组内消费者消费。 6、kafka如何知道哪个消费者消费哪个分区? 生产者把数据发送给各个分区&…

Android Profiler 内存分析

Android studio(下面简称AS)为App提供的性能分析工具,在AS3.0替换掉旧的分析工具,对于其使用方法,官方也有对应的介绍:Android Profiler 对于使用方法,我只用到比较简单的功能,高级的…

DXF-模型空间和图纸空间、图层冷冻标志位

‌DXF文件中操作环境的标志码是组代码67 CAD-模型空间和图纸空间-是CAD中两种不同的操作环境 模型空间主要用于建模,是一个没有界限的三维空间,用户在这个空间中以任意尺寸绘制图形,通常按照1:1的比例,以实际尺寸绘制…

前端开发调试之 PC 端调试

以下内容来自稀土掘金青训营课程 bug 与 debug 点击.cls开启动态修改元素的class输入字符串可以动态的给元素添加类名勾选/取消类名可以动态的查看类名生效效果点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑,浏览器内容区域实时预览…

Spring Boot集成SQL Server快速入门Demo

1.什么是SQL Server? SQL Server是由Microsoft开发和推广的以客户/服务器(c/s)模式访问、使用Transact-SQL语言的关系数据库管理系统(DBMS),它最初是由Microsoft、Sybase和Ashton-Tate三家公司共同开发的&…

Self-RAG讲解

Self-RAG Self-RAG 概述 Self-RAG(Self-Reflective Retrieval-Augmented Generation)是一种增强型的RAG(检索增强生成)策略,结合了自我反思和自我评分机制,以提高检索文档和生成内容的质量。通过对检索到…

设计一致性的关键:掌握 Axure 母版使用技巧

设计一致性的关键:掌握 Axure 母版使用技巧 前言 在快节奏的产品开发周期中,设计师们一直在寻找能够提升工作效率和保持设计一致性的方法。 Axure RP,作为一款强大的原型设计工具,其母版功能为设计师们提供了一个强大的解决方案…

uniapp框架配置项pages.json

uniapp框架配置项pages.json pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。 globalStyle 全局配置 用于设置应用的状态栏、导航条、标题、窗口背景色等。下面配置项默认应用于每个页面。 注意…

蓝桥杯c++算法学习【1】之枚举与模拟(卡片、回文日期、赢球票、既约分数:::非常典型的比刷例题!!!)

重发一下,之前得排版有问题,而且另外加了一道题。。 别忘了请点个赞收藏关注支持一下博主喵!!! 关注博主,更多蓝桥杯nice题目静待更新:) 枚举与模拟 一、卡片: 【问题描述】 小蓝有很多数字…

Java 基于 SpringBoot+Vue 的社区智慧养老系统(V3.0)

大家好,我是Java徐师兄,今天为大家带来的是Java 基于 SpringBootVue 的社区智慧养老系统(V3.0)。该系统采用 Java 语言开发,SpringBoot 框架,MySql 作为数据库,系统功能完善 ,实用性…

el-table 纵向垂直表头处理

项目中表格展示会遇到需要纵向垂直表头情况,下面,我们基于el-table组件来实现这种表格。 以下是这次需要用到的数据表格,已知左侧违章名称是固定的,而月份是不固定的,在后端返回数据格式已确定的情况下,需…

caozha-CEPCS(新冠肺炎疫情防控系统)

caozha-CEPCS,是一个基于PHP开发的新冠肺炎疫情防控系统,CEPCS(全称:COVID-19 Epidemic Prevention and Control System),可以应用于单位、企业、学校、工业园区、村落等等。小小系统,希望能为大…

新手如何快速搭建一个Springboot项目

新手如何快速搭建一个Springboot项目 一、开发环境准备后端其他工具 二、创建后端项目三、定义HelloController.hello()方法,返回“Hello Springboot” 一、开发环境准备 后端 1.安装 JDK:确保你的系统中安装了合适版本的 JDK,Spring Boot …

uniapp—android原生插件开发(4uniapp引用aar插件)

本篇文章从实战角度出发,将UniApp集成新大陆PDA设备RFID的全过程分为四部曲,涵盖环境搭建、插件开发、AAR打包、项目引入和功能调试。通过这份教程,轻松应对安卓原生插件开发与打包需求! 一、将android程序打包成aar插件包 直接使…

vs2022搭建opencv开发环境

1 下载OpenCV库 https://opencv.org/ 下载对应版本然后进行安装 将bin目录添加到系统环境变量opencv\build\x64\vc16\bin 复制该路径 打开高级设置添加环境变量 vs2022新建一个空项目 修改属性添加头文件路径和库路径 修改链接器,将OpenCV中lib库里的o…

[Java]微服务拆分

导入项目 本篇及后续的微服务学习都是基于Centos7系统下的Docker部署,因此需要准备: Centos7的环境SSH客户端安装好Docker会使用Docker 之前的学习, 导致虚拟机中存在黑马商城项目以及mysql数据库, 为了保持一致, 需要删除 cd /rootdocker compose down 安装mysq…

【C++】内存池

目录 一、什么是内存池 1.池化技术 2.内存池 3.内存池主要解决的问题 二、内存池的实现 1.New申请空间 2.Delete释放空间 3.再看New申请空间 4.内存池完整代码 三、内存池性能测试 一、什么是内存池 1.池化技术 所谓 "池化技术",就是程序向系统…

计算机新手练级攻略——如何搜索问题

目录 计算机学生新手练级攻略——如何搜索问题1.明确搜索意图2.使用精确关键词3.使用专业引擎搜索4.利用好技术社区1. Stack Overflow2. GitHub3. IEEE Xplore4. DBLP 5.使用代码搜索工具1. GitHub 代码搜索2. Stack Overflow 代码搜索3. Papers with Code4. IEEE Xplore 6.查阅…

区块链技术在电子政务中的应用

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 区块链技术在电子政务中的应用 区块链技术在电子政务中的应用 区块链技术在电子政务中的应用 引言 区块链技术概述 定义与原理 发…

stm32 踩坑笔记

串口问题: 问题:会改变接收缓冲的下一个字节 串口的初始化如下,位长度选择了9位。因为要奇偶校验,要选择9位。但是接收有用数据只用到1个字节。 问题原因: 所以串口接收时会把下一个数据更改