0

The link to the icon picker is the following: https://github.com/laistomazz/font-awesome-picker

I'm making it run but it doesn't show me the icons. When I inspect the elements that should be showing me the icons has the icon in question

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

To install FontAwesome I run the following commands

$    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

To set up the library on vanilla Vue, the documentation suggests this:

on src/main.js file. source: https://fontawesome.com/docs/web/use-with/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/>'
})

As I'm using Nuxt I import the component on 'plugins/global-components.js' and it keeps on the not rendering.

Can someone help me?

Juanse Cejas T
  • 1
  • I highly recommend to use iconify or something alike, rather than struggle with this kind of BS (Fontawesome is ALWAYS a mess to setup etc...). So, something based on this: https://stackoverflow.com/a/72055404/8816585 needs to be done once for all and then you're done with it. – kissu May 20 '22 at 09:27

1 Answers1

0

You need to install @nuxtjs/fontawesome package. There also a doc described how to use FA with nuxt https://www.npmjs.com/package/@nuxtjs/fontawesome.

I use font awesome in my nuxt project like this:

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'],
  },
}
linnloss
  • 66
  • 1
  • 3
  • I have touched the code to adapt it to my need of using only the free icons and it keeps on not working, I do not know what else to do. I'll start my own icon picker. – Juanse Cejas T May 21 '22 at 00:21