远方的灯塔 - 专注于服务端技术分享 远方的灯塔 - 专注于服务端技术分享
首页
  • Java SE
  • Struts2
  • Hibernate
  • MyBatis
  • JAX-WS
  • 并发
  • 分布式
  • Git
  • 文章分类
  • 文章标签
  • 文章归档
  • 《C程序设计语言》
心情随笔
友情链接
给我留言 (opens new window)
关于我
GitHub (opens new window)

Terwer Green

一个后端老菜鸟
首页
  • Java SE
  • Struts2
  • Hibernate
  • MyBatis
  • JAX-WS
  • 并发
  • 分布式
  • Git
  • 文章分类
  • 文章标签
  • 文章归档
  • 《C程序设计语言》
心情随笔
友情链接
给我留言 (opens new window)
关于我
GitHub (opens new window)
  • 把npm依赖转换为本地依赖
  • 从零开始写一个vuepress插件
  • dojo利用promise实现多个异步校验
  • 使用nodejs实现ed25519的公钥加密和私钥解密
  • js正则替换和删除字符串
  • 纯css实现下拉菜单
  • css背景上下渐变的实现
  • npm切换为阿里云国内源码
  • vdoing主题vuepress的v1版本集成Artalk
  • node发送邮件
  • 两栏布局左右拖拽效果实现方案
  • 国际化
  • vue3的reactive和ref的区别
  • Next-js组件使用泛型类型传递异步数据
  • 从零开始使用react写一个随机变色的标签组件
  • yarn和npm设置国内镜像源
  • vite使用nodeJS内置的模块
  • 使用vitest对vite项目进行单元测试
  • Web字体简介_TTF_OTF_WOFF_EOT以及SVG
  • Chrome插件开发background_js支持跨域请求与返回async和await的处理
  • Nuxt3和Vue3集成FontAwesome
    • 安装依赖
    • 添加 Nuxt 插件
    • 使用图标
  • babel运行nodejs
  • 使用cross-fetch替换node-fetch和isomorphic-fetch
  • dotenv加载变量
  • MacOS解决npm权限不足问题
  • 在Vite+TypeScript的项目中使用~和@代替src根路径的方法
  • 使用TypeScript开发一个自定义的Node-js前端开发脚手架
  • 解决css部分border被圆角切掉之后圆角的边框消失问题
  • 前端开发
terwer
2022-10-09
目录

Nuxt3和Vue3集成FontAwesome

# 安装依赖

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/vue-fontawesome
1
2
3
4

# 添加 Nuxt 插件

在 Nuxt3 的项目根目录新建 plugins 文件夹

然后新建文件 fontawesomePlugin.ts ,代码如下

import {library} from '@fortawesome/fontawesome-svg-core'
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import {faSms, faHome, faBolt, faBook, faJar,faUser,faGear} from '@fortawesome/free-solid-svg-icons'
import {faFacebook, faTwitter} from '@fortawesome/free-brands-svg-icons'

library.add(faTwitter)
library.add(faFacebook)
library.add(faSms)
library.add(faHome)
library.add(faBook)
library.add(faBolt)
library.add(faJar)
library.add(faUser)
library.add(faGear)

export default defineNuxtPlugin((nuxtApp) => {
    // @ts-ignore
    nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 使用图标

最后在 Vue 组件中直接使用即可,例如

<font-awesome-icon :icon="fa-home"/>
1
编辑 (opens new window)
#使用#安装#依赖#添加#font#awesome#font-awesome#vue#nuxt#vue3#nuxt3#新建
上次更新: 2023/02/22, 13:47:25
Chrome插件开发background_js支持跨域请求与返回async和await的处理
babel运行nodejs

← Chrome插件开发background_js支持跨域请求与返回async和await的处理 babel运行nodejs→

最近更新
01
解决css部分border被圆角切掉之后圆角的边框消失问题
03-18
02
使用TypeScript开发一个自定义的Node-js前端开发脚手架
03-08
03
Github-Actions使用release-please实现自动发版
03-06
更多文章>
Theme by Vdoing | Copyright © 2011-2023 Terwer Green | MIT License | 粤ICP备2022020721号-1 | 百度统计
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式