Font Awesome 5 图标在带有 Nuxt 的 Vuetify 中不起作用

Question

我已按照 Vuetify 中规定的安装程序在我的 Nuxt 应用程序中使用 Font Awesome 图标。

https://vuetifyjs.com/en/customization/icons/#install-font-awesome-5-icons

但是，图标不起作用。这是我的模板代码。

<v-btn v-for="icon in icons" :key="icon" class="mx-3" icon>
  <v-icon size="24px">
    {{ icon }}
  </v-icon>
</v-btn>

这是脚本代码。

<script>
export default {
  name: 'Footer',
  data () {
    return {
      icons: [
        'fab fa-facebook',
        'fab fa-twitter',
        'fab fa-linkedin',
        'fab fa-google-plus',
        'fab fa-instagram'
      ]
    }
  }
}
</script>

Answer 1

使用 CLI 安装 Font Awesome 图标

npm install --save @fortawesome/fontawesome-free

在nuxt.config.js文件中添加CSS

css: [
  '@fortawesome/fontawesome-free/css/all.css'
],