当前位置: 首页 > news >正文

vue3引用Font-Awesome字体图标库

环境:vue3+ts+vite+element plus
介绍:这里安装引用的是Font-Awesome 6.x 版本,有专业版(付费),这里只介绍免费版字体使用方法

一、安装

1.使用npm安装,终端打开项目目录或者命令行cd到目录文件夹下,运行(添加SVG核心包和图标):

npm i --save @fortawesome/fontawesome-svg-core  //核心
npm i --save @fortawesome/free-solid-svg-icons  //实体图标 
npm i --save @fortawesome/free-regular-svg-icons //常规图标
//(实体和常规图标的区别看下面举例,选其一安装,或者两者都按装)
npm i --save @fortawesome/free-brands-svg-icons //品牌图标(非必要,如有用到品牌图标比如推特,Facebook,苹果等图标)

2.安装vue组件

npm i --save @fortawesome/vue-fontawesome@prerelease

3.注册组件 在main.ts里面
在这里插入图片描述

/* 核心 */
import { library } from '@fortawesome/fontawesome-svg-core'
/* 引用图标库 FontAwesome Icon*/
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
/* 引用图标 */
import { faCopy as farCopy } from '@fortawesome/free-regular-svg-icons' //常规
import { faCopy as fasCopy } from '@fortawesome/free-solid-svg-icons' //实体
import { faTwitter,faApple } from '@fortawesome/free-brands-svg-icons' //品牌
/* add icons to the library */
library.add(farCopy,fasCopy,faTwitter,faApple)app.component('font-awesome-icon', FontAwesomeIcon)

4.使用 (看步骤3里面引用图标处)

<template><div><h1>演示</h1><font-awesome-icon icon="fa-solid fa-copy" class="icon-copy1"/> //实体<br><font-awesome-icon icon="fa-regular fa-copy" class="icon-copy2"/> //常规<br><font-awesome-icon icon="fa-brands fa-apple" /> //品牌</div>
</template>
<style lang="scss" scoped>
$red:red;
$fontSize:24px;
.icon-copy1{color: $red;font-size: $fontSize;
}
</style>

注意要对应好
在这里插入图片描述
效果:此时看到同一个图标copy两种引用方式常规和实体的区别了吧
在这里插入图片描述
Font-Awesome 6版本可使用的免费图标参考: 官网地址

相关文章:

vue3引用Font-Awesome字体图标库

环境&#xff1a;vue3tsviteelement plus 介绍&#xff1a;这里安装引用的是Font-Awesome 6.x 版本&#xff0c;有专业版&#xff08;付费&#xff09;&#xff0c;这里只介绍免费版字体使用方法 一、安装 1.使用npm安装&#xff0c;终端打开项目目录或者命令行cd到目录文件夹…...

Python: Django 服务部署可能遇到的一些问题

502 bad gateway 不要用 python3 manage.py runserver 启动服务&#xff0c; 而要用&#xff1a; daphne -b 0.0.0.0 -p <端口> <工程名>.asgi:application此外&#xff0c;在 setting.py 中&#xff0c;修改&#xff1a; import osSECRET_KEY os.environ.get(D…...

Python爬虫时遇到连接超时解决方案

在进行Python爬虫任务时&#xff0c;经常会遇到连接超时&#xff08;TimeoutError&#xff09;错误。连接超时意味着爬虫无法在规定的时间内建立与目标服务器的连接&#xff0c;导致请求失败。为了帮助您解决这个常见的问题&#xff0c;本文将提供一些解决办法&#xff0c;并提…...

这所国字头双一流,根本招不满,学硕都没人报!

一、学校及专业介绍 中国民航大学&#xff0c;位于天津市&#xff0c;是民航局、天津市、教育部共建高校&#xff0c;是天津市“双一流”建设高校和高水平特色大学建设高校。 1.1 招生情况 2023年中国民航大学电子信息与自动化学院&#xff0c;初试考806信号与系统的一共有两…...

macos 查询端口占用 命令

在 macOS 上查询端口占用的命令是通过使用lsof&#xff08;list open files&#xff09;工具来实现的。 lsof可以显示当前系统中打开的文件&#xff08;包括网络连接和端口&#xff09;的相关信息。 打开终端应用程序&#xff08;Terminal&#xff09;&#xff0c;然后输入以下…...

无代码开发:打破传统开发模式,引领数字化转型新方向

随着数字化转型的加速&#xff0c;企业对于高效、便捷的软件开发需求愈发旺盛。无代码开发作为一种新兴的软件开发模式&#xff0c;以其可视化、模块化的开发方式&#xff0c;为数字化转型提供了新的方向。本文将从无代码开发的优势、应用场景、如何实现等方面进行详细解读&…...

go-zero超强工具goctl的常用命令api,rpc,model及其构建的服务解析

goctl api 详情移步&#xff1a; go-zero的路由机制解析 基于go-zero的api服务刨析并对比与gin的区别 goctl rpc goctl支持多种rpc&#xff0c;较为流行的是google开源的grpc&#xff0c;这里主要介绍goctl rpc protoc的代码生成与使用。 protoc是grpc的命令&#xff0c;作用…...

手机python编程软件怎么用,手机python编程软件下载

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;手机python编程软件保存的代码在哪里&#xff0c;手机python编程软件怎么运行&#xff0c;现在让我们一起来看看吧&#xff01; 原标题&#xff1a;盘点几个在手机上可以用来学习编程的软件 前天在悟空问答的时候&#…...

【使用 DSP 滤波器加速速度和位移】使用信号处理算法过滤加速度数据并将其转换为速度和位移研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

家居行业解决方案 | 君子签电子签约助力家居企业减负增效

过去&#xff0c;家居行业因供需两端碎片化、服务链条较长等因素&#xff0c;导致线上发展较为缓慢&#xff0c;近年来&#xff0c;互联网的发展推动直播电商、兴趣电商兴起&#xff0c;促使家居行业数字化建设需求越来越为迫切。 合同管理作为家居行业企业经营的一项重要管理…...

Nodejs 第五章(Npm run 原理)

npm run xxx 发生了什么 按照下面的例子npm run dev 举例过程中发生了什么 读取package json 的scripts 对应的脚本命令(dev:vite),vite是个可执行脚本&#xff0c;他的查找规则是&#xff1a; 先从当前项目的node_modules/.bin去查找可执行命令vite如果没找到就去全局的node…...

150. 逆波兰表达式求值

给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。 请你计算该表达式。返回一个表示表达式值的整数。 注意&#xff1a; 有效的算符为 、-、* 和 / 。 每个操作数&#xff08;运算对象&#xff09;都可以是一个整数或者另一个表达式。 两个…...

js中的设计模式

设计模式 代码整体的结构会更加清楚&#xff0c;管理起来会更加方便&#xff0c;更好地维护 设计模式是一种思想 发布订阅 模块化开发 导入很多模块 容器即数组存储未来要执行的方法&#xff0c;同addEventListener 数组塌陷问题* 由于删除了元素&#xff0c;导致从删除元素的位…...

PostgreSQL:string_agg 多列值聚合成一列

PostgreSQL:string_agg 多列值聚合成一列 string_agg是PostgreSQL中的一个聚合函数&#xff0c;用于将一组值连接为一个字符串。它接受两个参数&#xff1a;要连接的值和连接符。 语法如下&#xff1a; string_agg(expression, delimiter)其中&#xff0c;expression是要连接…...

通向架构师的道路之apache_tomcat_https应用

一、总结前一天的学习 通过上一章我们知道、了解并掌握了Web Server结合App Server是怎么样的一种架构&#xff0c;并且亲手通过Apache的Http Server与Tomcat6进行了整合的实验。 这样的架构的好处在于&#xff1a; 减轻App Server端的压力&#xff0c;用Web Server来分压…...

iOS——锁与死锁问题

iOS中的锁 什么是锁锁的分类互斥锁1. synchronized2. NSLock3. pthread 递归锁1. NSRecursiveLock2. pthread 信号量Semaphore1. dispatch_semaphore_t2. pthread 条件锁1. NSCodition2. NSCoditionLock3. POSIX Conditions 分布式锁NSDistributedLock 读写锁1. dispatch_barri…...

恒运资本:股票总市值是什么意思?

职业新手可能会疑惑地问&#xff0c;股票总市值到底是什么意思&#xff1f;究竟&#xff0c;这是普通出资者常常看到的词汇&#xff0c;要了解股票总市值的含义&#xff0c;是需求了解金融商场的基本概念的。 股票总市值简介 股票的总市值是由公司一切的股票的数量乘以现在的价…...

Selenium Chrome Webdriver 如何获取 Youtube 悬停文本

导语 Youtube 是一个非常流行的视频分享平台&#xff0c;有时候我们可能想要爬取一些视频的信息&#xff0c;比如标题、播放量、点赞数等。但是有些信息并不是直接显示在网页上的&#xff0c;而是需要我们将鼠标悬停在某个元素上才能看到&#xff0c;比如视频的时长、上传时间…...

【LeetCode每日一题】——766.托普利茨矩阵

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【题目进阶】八【解题思路】九【时间频度】十【代码实现】十一【提交结果】 一【题目类别】 矩阵 二【题目难度】 简单 三【题目编号】 766.托普利茨矩阵 四【题目描述…...

第三方材料检测实验室LIMS系统源码 lims源码

实验室LIMS系统采用国际规范的业务管理流程和严格的质量控制体系&#xff0c;对每个检测流程节点采用 “人、机、料、法、环、测”进行质量控制&#xff0c;可记录&#xff0c;可追溯。强大的数据查询和统计分析能力&#xff0c;提高工作效率&#xff1b;自动化地采集实验室原始…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...