Font-Awesome已经更新到6.0.0了,6与5的安装相同。官网提供了详细的安装、使用教程:
Font-Awesome: Use with Vue

一、安装

官方提供了很多安装使用方式,这里仅展示一种

Git地址:vue-fontawesome

1、npm安装

  • Install the core package and icon content 安装核心包和图标
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
  • Install this Vue component 安装vue组件
npm i --save @fortawesome/vue-fontawesome@prerelease
  • Add more styles or Pro icons 安装更多样式图标(非必要
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

付费用户可安装额外的样式包(即 light、thin、duotone)

2、或用yarn安装

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/vue-fontawesome@prerelease

yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/free-regular-svg-icons

二、使用

1、全局注册组件

Git上给出的实例:

import { createApp } from 'vue'
import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faUserSecret)

createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')

导入FontAwesomeIcon组件并全局注册;
导入faUserSecret图标,并加入到library,注意,这个实例仅仅只是导入了一个图标
导入全部图标是不被推荐的,会导入全部数千个图标,打包后体积过大

2、使用图标

在这里使用其他图标是无效的,因为之前仅导入了faUserSecret

<template>
  <div id="app">
    <font-awesome-icon icon="user-secret" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

fa官网:Icons | Font Awesome

同样一个图标,拥有四种样式,solid, regular, light, duotone,后两种全部需要付费

solid: <i class="fas fa-angry"></i>
regular: <i class="far fa-angry"></i>
light: <i class="fal fa-angry"></i>
duotone: <i class="fad fa-angry"></i>
此外还有Brands类图标也是免费的

回到实例,需要注意的是,之前导入使用的图标为“faUserSecret”

而使用时,用的是icon="user-secret",没有指定图标类型

可以指定icon类型::icon="['fas', 'user-secret']",未指定类型时,默认是solid类型

3、使用同一图标的多个样式

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee as fasCoffee } from '@fortawesome/pro-solid-svg-icons'
import { faCoffee as farCoffee } from '@fortawesome/pro-regular-svg-icons'
import { faCoffee as falCoffee } from '@fortawesome/pro-light-svg-icons'
import { faCoffee as fadCoffee } from '@fortawesome/pro-duotone-svg-icons'

library.add(fasCoffee, farCoffee, falCoffee, fadCoffee)
<font-awesome-icon :icon="['fas', 'coffee']"/>
<font-awesome-icon :icon="['far', 'coffee']"/>
<font-awesome-icon :icon="['fal', 'coffee']"/>
<font-awesome-icon :icon="['fad', 'coffee']"/>

导入全部图标(不建议):

import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
library.add(fas, fab)

三、特性

font-awesome5的诸多特性可以将图标玩出花来
这里就不占了,直接看Git或官网吧
vue-fontawesome: Features
npmjs: vue-fontawesome: Features

四、参考链接

官网:Font-Awesome Icons
非vue使用教程:Font-Awesome中文网

Logo

前往低代码交流专区

更多推荐