六站合一的优势,备案修改网站名称,站酷官网入口,网站开发 0755环境#xff1a;vue3tsviteelement plus 介绍#xff1a;这里安装引用的是Font-Awesome 6.x 版本#xff0c;有专业版#xff08;付费#xff09;#xff0c;这里只介绍免费版字体使用方法
一、安装
1.使用npm安装#xff0c;终端打开项目目录或者命令行cd到目录文件夹…环境vue3tsviteelement 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-fontawesomeprerelease3.注册组件 在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里面引用图标处
templatedivh1演示/h1font-awesome-icon iconfa-solid fa-copy classicon-copy1/ //实体brfont-awesome-icon iconfa-regular fa-copy classicon-copy2/ //常规brfont-awesome-icon iconfa-brands fa-apple / //品牌/div
/template
style langscss scoped
$red:red;
$fontSize:24px;
.icon-copy1{color: $red;font-size: $fontSize;
}
/style注意要对应好 效果此时看到同一个图标copy两种引用方式常规和实体的区别了吧 Font-Awesome 6版本可使用的免费图标参考 官网地址
