Font Awesome 5 图标无法在 Vuetify 和 Nuxt 中工作

Question

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

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'
],