微信小程序中如何使用fontawesome6的免费图标

一、官网下载fontawesome6

Download Font Awesome Free or Pro | Font Awesome

二、使用transfer编码成Base64

transfer打开官网:Online @font-face generator — Transfonter

首先先把刚刚下载的fontawesome6解压,将文件夹中的字体上传(点击“Add fonts”按钮)到transfonter,打开Base64 encode

再点击Download下载即可,将刚刚下载的文件解压,得到如下文件目录

三、在微信小程序中设置

将上一步解压的文件中的stylesheet.css ,后缀改为wxss。

在微信小程序项目的根目录中新建fontStyles文件夹,并将刚刚改名的stylesheet.wxss复制进去,并在style文件夹中创建一个新的文件叫font-awesome.wxss

回到最开始下载解压完成的...\Downloads\fontawesome-free-6.4.2-web\css文件夹中,打开css目录,找到fontawesome.css并打开,将文件内所有内容复制到font-awesome.wxss

font-awesome.wxss中从开始注释到下面这个区域:

再添加上下面一段代码:

  .fas,

  .fa-solid {

      font-family: 'Font Awesome 6 Free';

      font-weight: 900;

  }

  

  .far,

  .fa-regular {

      font-family: 'Font Awesome 6 Free';

      font-weight: 400;

  }

在小程序项目根目录下配置app.wxss,引入我们刚刚弄好的wxss文件

四、使用

使用免费图标

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

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

相关文章

java入参为对象的(非基本数据类型int/float等)修改属性会影响原始对象

ApiOperation("登录接口")RequestMapping(value "/login", method RequestMethod.POST)public Result<JSONObject> login(RequestBody SysLoginModel sysLoginModel){Result<JSONObject> result new Result<JSONObject>();// by wang…

禁用和开启笔记本电脑的键盘功能,最快的方式

笔记本键盘通常较小&#xff0c;按键很不方便&#xff0c;当我们外接了键盘时就不需要再使用自带的键盘了&#xff0c;而且午睡的时候&#xff0c;总是担心碰到笔记本的键盘&#xff0c;可能会删掉我们的代码什么的&#xff0c;所以就想着怎么禁用掉&#xff0c;下面是操作步骤…

面向切面:AOP

文章目录 简介相关术语①横切关注点②通知&#xff08;增强&#xff09;③切面④目标⑤代理⑥连接点⑦切入点 场景模拟代理模式静态代理动态代理 基于注解的AOP&#xff08;重点&#xff09;准备工作各种通知切入点表达式语法重用切入点表达式获取通知的相关信息 环绕通知 切面…

分类算法-逻辑回归与二分类

1、逻辑回归的应用场景 广告点击率是否为垃圾邮件是否患病金融诈骗虚假账号 看到上面的例子&#xff0c;我们可以发现其中的特点&#xff0c;那就是都属于两个类别之间的判断。逻辑回归就是解决二分类问题的利器。 2、 逻辑回归的原理 2.1 输入 逻辑回归的输入就是一个线性…

HarmonyOS/OpenHarmony原生应用开发-华为Serverless服务支持情况(四)

文档中的TS作者认为就是ArkTS之意。 一、云存储 AppGallery Connect&#xff08;简称AGC&#xff09;云存储是一种可伸缩、免维护的云端存储服务&#xff0c;可用于存储图片、音频、视频或其他由用户生成的内容。借助云存储服务&#xff0c;您可以无需关心存储服务器的开发、…

Python自动化运维实战——Telnetlib和Netmiko自动化管理网络设备

❤️博客主页&#xff1a; iknow181&#x1f525;系列专栏&#xff1a; Python、JavaSE、JavaWeb、CCNP&#x1f389;欢迎大家点赞&#x1f44d;收藏⭐评论✍ 目录 一、前言 二、准备工作 三、Telnetlib Telnetlib介绍 Telnetlib模块及操作方法介绍 Telnetlib配置设备 T…

uniapp:使用subNVue原生子窗体在map上层添加自定义组件

我们想要在地图上层添加自定义组件&#xff0c;比如一个数据提示框&#xff0c;点一下会展开&#xff0c;再点一下收起&#xff0c;在h5段显示正常&#xff0c;但是到app端真机测试发现组件显示不出来&#xff0c;这是因为map是内置原生组件&#xff0c;层级最高&#xff0c;自…

从0开始编写BP,自适应学习率的BP神经网络,不使用MATLAB工具箱,纯手写matlab代码,以BP分类为例...

与上篇文章不同&#xff0c;仔细读了上篇文章的小伙伴应该知道&#xff0c;BP神经网络是有一个学习率的&#xff0c;而这个学习率很大程度上决定着神经网络的效果。这里采用自适应学习率&#xff0c;实现纯手写BP神经网络。 编程时&#xff0c;激活函数选择Sigmoid函数&#xf…

每日一记项目,拼图小游戏

利用一下午时间&#xff0c;写了这个每日一记项目&#xff0c;以复习IO的操作练习&#xff08;源码在文章最下方&#xff08;免费&#xff09;&#xff09; 每日一记&#xff1a; https://download.csdn.net/download/weixin_73048842/88438670 拼图小游戏&#xff0c;登录注…

MFC-列表控件

目录 1、更改列表控件的属性&#xff1a; 2、代码设置表头&#xff1a; 3、设置正文内容&#xff1a; 4、设置属性&#xff0c;显示成表格形式 &#xff1a; 5、代码实现&#xff1a; 1、更改列表控件的属性&#xff1a; VIEW设置为Report模式会出现表格形状 2、代码设置…

二维码智慧门牌管理系统:高效标准化处理地址数据

文章目录 前言一、标准化数据的重要性二、标准检查与自动化处理三、人工修复与高效性四、数据应用与效益 前言 随着科技的快速发展&#xff0c;数据管理在现代社会中扮演着越来越重要的角色。为了提升数据质量&#xff0c;标准化检查成为必不可少的环节。今天&#xff0c;我们…

软考系统架构设计师考试冲刺攻略

系统架构冲刺攻略 上篇为综合知识&#xff0c;介绍了系统架构设计师应熟练掌握的基本知识&#xff0c;主要包括绪论、计算机系统、信息系统、信息安全技术、软件工程、数据库设计、系统架构设计、系统质量属性与架构评估、软件可靠性、软件架构的演化和维护、未来信息综合技术等…

vim的配置文件

用户级别配置文件 ~/.vimrc 修改用户级别的配置文件只会影响当前用户, 不会影响其他的用户. 例如: 在用户的家目录下的.vimrc文件中添加 set tabstop4 ----设置缩进4个空格 set nu ----设置行号 set shiftwidth4 —设置ggG缩进4个空格, 默认是缩进8个空格 系统级别配置文件 /e…

axios 请求的缓存封装

前言 咱们的网站或者程序&#xff0c;每一个页面和操作都需要请求后端接口来获取响应和渲染页面&#xff0c;抛开post请求方式的接口不说&#xff0c;部分get请求得到的数据&#xff0c;短时间内不会更新&#xff0c;或者短时间得到的响应数据不会变化&#xff0c;这个时候就可…

【面试经典150 | 区间】插入区间

文章目录 Tag题目解读题目来源解题思路方法一&#xff1a;合并区间方法二&#xff1a;模拟 其他语言python3 写在最后 Tag 【模拟】【数组】 题目解读 给定一个含有多个无重叠区间的数组&#xff0c;并且数组已经按照区间开始值升序排序。在列表中插入一个新的区间&#xff0…

小程序原生代码转uniapp

写了一份小程序原生代码&#xff0c;想转为uniapp 再转为其他平台发布 1、在命令行里&#xff0c;运行【 npm install miniprogram-to-uniapp -g 】进行安装&#xff0c;因为这个包是工具&#xff0c;要求全局都能使用&#x…

JS加密/解密之webpack打包代码逆向

Webpack 是一个强大的打包工具&#xff0c;能够将多个文件打包成一个或多个最终的文件。然而&#xff0c;将已经经过打包的代码还原回原始源代码并不是一件直接的事情&#xff0c;因为 webpack 打包的过程通常会对代码进行压缩、混淆和优化&#xff0c;丢失了部分变量名和代码结…

【C++11新特性】右值引用和移动语义(移动构造,移动赋值)

文章目录 前言一、列表初始化&#xff08;不同于初始化列表&#xff09;二、initializer_list三、decltype关键字四、nullptr五、右值引用移动拷贝和移动赋值被编译器识别成将亡值的原因 左值引用和右值引用的场景和价值右值引用的场景move函数 六、关于右值引用的功能和属性问…

全景分割的自监督学习

在本章中,我们将第3章中讨论的SSL方法扩展到语义和全景分割任务。使用手动生成的标签训练的卷积神经网络通常用于语义或实例分割。 在精准农业中,自动化花朵检测方法使用监督模型和后处理技术,随着花朵的外观和数据采集条件的变化,这些技术可能无法始终如一地执行。我们提…

pinctrl子系统 - 架构和结构体关系(四)

一&#xff0c;pinctrl的引入 由于SoC系统越来越复杂、集成度越来越高&#xff0c;SoC中pin的数量也越来越多、功能也越来越复杂&#xff0c;这就对如何管理、使用这些pins提出了挑战。因此&#xff0c;用于管理这些pins的硬件模块&#xff08;pin controller&#xff09;就出…