Fontawesome Icon Picker不渲染图标VUE2（NUXT）

Question

与图标选择器的链接如下： https://github.com/laistomazz/font-awosh/font-awsome-picker

我使它运行，但没有向我展示图标。当我检查应该向我显示图标的元素具有所讨论的图标

<a href="#" class="item">
 <I class="fas fa-arrow-alt-circle-right"></i>
</a>

以安装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/vue-fontawesome@latest

以在Vanilla Vue上设置库时，该文档建议以下内容：

在src/main.js文件上。 来源： https://fontawesher.com/docsy.com/docs/web/web/euse-use-in-使用/vue/add-icons

  import Vue from 'vue'
import App from './App'

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

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

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

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

/* add font awesome icon component */
Vue.component('font-awesome-icon', FontAwesomeIcon)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

当我使用nuxt时，我会在“插件/global-components.js”上导入组件，并且不断呈现。

有人可以帮我吗？

Answer 1

您需要安装 @nuxtjs/fontawesome软件包。还有一个文档描述了如何与nuxt https://www.npmjs.com//包/@nuxtjs/fontawesome 。

我在这样的NUXT项目中使用字体很棒：

nuxt.config.js

import fontawesome from './fontawesome'

export default {
  buildModules: [
    '@nuxtjs/fontawesome'
  ],
  fontawesome,
}

fontawesome.js

export default {
  component: 'Icon',
  icons: {
    brands: ['faFacebookF', 'faVk', 'faInstagram', 'faTelegramPlane'],
  },
  proIcons: {
    // List used icons here
    light: ['faImage', 'faVideo'],
    solid: ['faGripVertical'],

    regular: ['faTimes', 'faSearch', 'faVolume', 'faCog', 'faExpandWide'],
  },
}