vue3+ts开发微信小程序----使用FontAwesome图标的步骤(只适用于面性图标)

news2024/11/26 12:25:06

vue3+ts开发微信小程序----使用FontAwesome图标的步骤(只适用于面性图标)

因为用的vue3+ts 但是对于npm引进FontAwesome来说,好像对于小程序不支持,所以用了引入文件的方式。

  1. 下载FontAwesome字体,我用的是5版本的。[官方网址];因为我下载的是v5.7.2pro版本,所有解压后的文件是这样的(https://fontawesome.com/download)
    在这里插入图片描述
    在这里插入图片描述
  2. 打开css文件,里面的 all.css后面需要用到;还有打开webfonts的文件,看到了下面红框的tff文件 需要进行相应转换:
    在这里插入图片描述
    在这里插入图片描述
  3. tff转换流程:打开网址,如下图点击红框按钮选中上面的tff文件后;在根据篮框中进行选择;完成后点击橙色框进行转化;最后进行下载文件。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  4. 上面这些准备好后,开始在项目中的文件中进行引进:
    1) 把上面准备好的all.css和转化好中的放进stylesheet.css文件项目的static文件中
    2)在static文件中新建一个fonts文件夹,把转化好的tff文件画红框部分放进去
    3)stylesheet.css需要进行一些修改,(更换字体名称,更新路径等操作)如下图片:
    在这里插入图片描述
    4)在App.vue中进行全局引用
<style lang="scss">
// 阿里图标
@import './static/editor-icon.css';

.fa {
    font: normal normal normal 40rpx/1 FontAwesome;
}

@import './static/all.css';

@import './static/stylesheet.css';
@import './static/stylesheet1.css';
</style>

5.在需要应用的页面进行添加

<text class="fa fa-briefcase"></text>

在这里插入图片描述

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

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

相关文章

从初识RabbitMQ到安装了解

一、同步和异步通讯 微服务间通讯有同步和异步两种方式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。 异步通讯&#xff1a;就像发邮件&#xff0c;不需要马上回复。 两种方式各有优劣&#xff0c;打电话可以立即得到响应&#xff0c;但是你却不…

记 SAM React Demo 转 Vue 遇到的一些问题

前言 SegmentAnything Model (SAM) 是 Meta 开源的分割万物 AI 模型&#xff0c;因笔者主要使用 Vue&#xff0c;因此对官方 Demo 进行了工程迁移工作&#xff0c;这里记录了迁移过程遇到的一些问题。 没有使用多线程加速 官方的 React Demo 项目使用ort-wasm-simd-threaded…

态路小课堂丨浅谈IDC数据中心综合布线互联

在数据中心发展过程中&#xff0c;服务器、光模块等设备更新周期短&#xff0c;迭代快。但是&#xff0c;对于IDC数据中心综合布线系统来说&#xff0c;其使用周期一般都比较长。因此&#xff0c;为了能够匹配IDC数据中心的发展&#xff0c;关于综合布线的设计尤为重要。 目前&…

【vue】elementUI中el-table拖动滚动条的时候固定某一列

文章目录 前言&#xff1a;需求 前言&#xff1a; 写项目的时候有一个需求&#xff0c;就是当el-table的滚动条滑动的时候&#xff0c;可见区域如果没有该列则固定到左侧&#xff0c;由elementUi官方网站可知el-table固定一列的代码如下: fixed为主要的标识 头部固定设置的是t…

leetcode 2336. Smallest Number in Infinite Set(有限集中的最小数字)

实现一个SmallestInfiniteSet类(后面用set简称)&#xff0c;满足以下功能&#xff1a; 初始化时&#xff0c;set含有所有的正整数。 pop函数返回set中最小的整数。 add函数在set中添加一个整数。 思路&#xff1a; set具有以下的功能&#xff1a; 可以取出最小的数字。 可以查…

FPGA入门系列13--异步串口通信

文章简介 本系列文章主要针对FPGA初学者编写&#xff0c;包括FPGA的模块书写、基础语法、状态机、RAM、UART、SPI、VGA、以及功能验证等。将每一个知识点作为一个章节进行讲解&#xff0c;旨在更快速的提升初学者在FPGA开发方面的能力&#xff0c;每一个章节中都有针对性的代码…

Baklib如何帮助企业设计并维护FAQ页面?

作为现代企业的一部分&#xff0c;客户支持服务是为客户提供解决方案、回答问题和解决技术难题的关键部分。而其中最重要的一个基本工具是FAQ页面&#xff08;Frequently Asked Questions&#xff09;&#xff0c;它可以有效地减轻客户支持压力和提高工作效率。然而&#xff0c…

Linux——进度条与git的使用

目录 main.c Makefile process.c \r process.h 进度条的演示动图 git的使用 在gitee上创建一个仓库 复制HTTPS到xshell git clone .gitignore ​编辑 git add git commit -m 这里写日志信息 git push sudo yum -y install git git log git status git mv / …

vue2之echarts的封装 折线图,饼图,大图

目录 vue2之echarts的封装 折线图&#xff0c;饼图&#xff0c;大图折线图&#xff0c;饼图chartPan.vue使用 chartPan.vue 之饼图效果使用 chartPan.vue 之折线图效果展开大图大图组件 maxChart.vue大图效果 vue2之echarts的封装 折线图&#xff0c;饼图&#xff0c;大图 折线…

视觉回归测试—UI自动化的最后1分钟

视觉回归测试是一种验证应用GUI是否正确地展示给用户的操作。测试目标是找出应用在可视化上存在的软件缺陷&#xff0c;例如&#xff0c;字体、布局和渲染问题。这使得所发现的软件缺陷可在被最终用户看到前得到修正。此外&#xff0c;视觉测试可用于验证页面的内容&#xff0c…

车道线检测

前言 目前&#xff0c;车道线检测技术已经相当成熟&#xff0c;主要应用在自动驾驶、智能交通等领域。下面列举一些当下最流行的车道线检测方法&#xff1a; 基于图像处理的车道线检测方法。该方法是通过图像处理技术从摄像头传回的图像中提取车道线信息的一种方法&#xff0c…

【AI工具 收藏】

文章目录 miniGPT4&#xff1a;chatGPT&#xff0c;支持图片哔哔终结者 BibiGPT&#xff1a;自动总结视频内容Scribble Diffusion&#xff1a;草图绘画ChatGPT Shortcut&#xff1a;prompt提示词其他 博客总结的工具&#xff1a; miniGPT4&#xff1a;chatGPT&#xff0c;支持图…

ROS2下机械手的手眼标定

最近发现老是有人通过爬虫把文章爬去他们网站&#xff0c;因此先发一遍这个草稿&#xff0c;让他们先爬。爬完我再慢慢修改 0.前期准备 0.1机械手要先映射&#xff08;标定好&#xff09;世界坐标系与用户坐标系 这个基本应该可以通过机械手自带的坐标系建立完成 一般机械手…

若依代码生成器的使用方式

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、代码生成器是什么&#xff1f;二、使用步骤1.菜单目录2.子菜单3.代码生成的方式 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1…

符合业务目标的数据战略建设

我们都知道&#xff0c;战略是通往目的的手段&#xff0c;是企业取得最佳商业成果的方法。处于当今的数字化社会&#xff0c;企业需要满足实现数字化转型及数字社会的需求&#xff0c;提升企业数据资产价值&#xff0c;推动行业甚至社会面的数据流通及数据价值变现。因此企业更…

【数据结构与算法】二、线性表的顺序表示【硬核】

文章目录 二、线性表2.1 线性表的定义和特点2.2 线性表的顺序表示和实现2.3 类C语言有关操作补充2.4 线性表基本操作的实现2.4.1 线性表的基本操作&#xff1a;2.4.2 线性表L的初始化2.4.3 销毁和清空线性表L2.4.4 求线性表L的长度以及判断线性表L是否为空2.4.5 顺序表的取值&a…

Docker --- Docker-Compose、镜像仓库

一、Docker-Compose Docker Compose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器&#xff01; 1.1、初识DockerCompose Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。格式如下&#xff1a; v…

手术机器人企业密集IPO 国产替代寻求突破

原创 | 文 BFT机器人 2023年或为手术机器人国产化元年&#xff0c;谁将成为中国的“达芬奇”&#xff1f;各路资本对中国手术机器人产业热情高涨。 今年以来&#xff0c;多家手术机器人企业启动首次公开发行&#xff08;IPO&#xff09;进程&#xff0c;精锋医疗冲刺港股&#…

09-Node.js—express框架

目录 1、express 介绍2、express 使用2.1 express 下载2.2 express 初体验 3、express 路由3.1 什么是路由3.2 路由的使用3.2.1使用Ajax发送一次post请求 3.3 获取请求参数3.4 获取路由参数3.5 路由参数练习 4、express 响应设置5、express 中间件5.1 什么是中间件5.2 中间件的…

echarts 环形图_圆环动画

Echarts 常用各类图表模板配置 注意&#xff1a; 这里主要就是基于各类图表&#xff0c;更多的使用 Echarts 的各类配置项&#xff1b; 以下代码都可以复制到 Echarts 官网&#xff0c;直接预览&#xff1b; 图标模板目录 Echarts 常用各类图表模板配置一、环形动画二、环形图…