vitepress 引用fontawesome

要在 Vitepress 中使用 Font Awesome，需要先安装 Font Awesome 和 @fortawesome/fontawesome-svg-core 两个依赖：

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome vite-plugin-fonts -D

在 `vite.config.js` 中添加以下代码：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import FontsPlugin from 'vite-plugin-fonts'

export default defineConfig({
  plugins: [
    vue(),
    FontsPlugin({
      google: {
        families: ['Roboto']
      },
      custom: {
        urls: ['https://use.fontawesome.com/releases/v5.15.3/css/all.css']
      }
    })
  ]
})

这里使用了 `vite-plugin-fonts` 插件来加载 Font Awesome，也可以使用其他的加载插件。

然后在需要使用 Font Awesome 的组件中引入：

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

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUser } from '@fortawesome/free-solid-svg-icons'

export default {
  components: {
    FontAwesomeIcon
  },
  created() {
    this.$fontawesome.add(faUser)
  }
}
</script>

在 `created()` 生命周期中需要将需要使用的 icon 添加进 `this.$fontawesome` 中，这样就可以在组件中使用了。