vue.js里使用fontawesome免费图标

下载必要的图标库

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

下载fontawesome的vue组件

npm i --save @fortawesome/vue-fontawesome@latest-3

在mian.js里引入

// in main.ts
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

/* add icons to the library */
library.add(faUserSecret)

const app = createApp(App)
app.component('font-awesome-icon', FontAwesomeIcon)
app.use(createPinia())
app.use(router)

app.mount('#app')

使用图标须知

我们使用某个图标时需要将它的图标名导入main.js:import { faUserSecret } from '@fortawesome/free-solid-svg-icons，然后添加到library中library.add(faUserSecret)

当我们在官网上找到需要引入的图标时，选择vue，例如<font-awesome-icon :icon="['far', 'sun']" />数组里的内容有两个细节：

• fa是图标的固定前缀，r代表此图标来自我们npm下载的solid, regular, brands里的regular库，fas就代表solid, fab代表brands. 图标名是fa+sun,即faSun。
• 在mian.js里我从solid库引入faUserSecret图标，引入和添加到我自己的library里。使用时就是<font-awesome-icon :icon="['fas', 'user-secret']" />

测试

App.vue

<template>
  <header class="sticky top-0 bg-weather-primary shadow-lg">
    <nav class="container flex flex-col sm:flex-row items-center gap-4 text-white py-6">
      <div class="flex items-center gap-3 flex-1">
        <font-awesome-icon :icon="['fas', 'sun']" class="text-2xl"/>
        <p class="text-2xl">The Local Weather</p>
      </div>
    </nav>
  </header>
</template>