0

Estoy haciendo pruebas con Vuejs y nuxtjs y no consigo que los iconos de font-awesome se muestren por pantalla. He buscado en distintas páginas y ponen que se introduzcan los siguientes comandos para instalar librerias pero no he tenido resultado:

$ npm i --save @fortawesome/free-brands-svg-icons

$ npm i --save @fortawesome/free-regular-svg-icons

$ npm i --save @fortawesome/fontawesome-svg-core

$ npm i --save @fortawesome/free-solid-svg-icons

$ npm i --save @fortawesome/vue-fontawesome

He utilizado el siguiente codigo y no ha funcionado:

<i class="fas fa-check" />

<font-awesome-icon icon="check" />
1
  • Y estas haciendo los import tambien?
    – gbianchi
    el 27 ago. 2020 a las 12:31

2 respuestas 2

0

Y estas haciendo los import tambien? – gbianchi♦ el 27 ago. a las 12:31 Al final parece que añadiendo las siguientes lineas en el archivo nuxt.config.js funciona:

css: [
'@fortawesome/fontawesome-svg-core/styles.css']

pluggins: [
'~/plugins/fontawesome.js']
-1

La primera respuesta es muy buena, pero igual hay un paqeute optimizado con muchas opciones de exportacion espero te sirva, yo lo he usado y te ayuda a optimizar los iconos que realmente necesitas: https://www.npmjs.com/package/@nuxtjs/fontawesome

buildModules: [   [
  '@nuxtjs/fontawesome',
  {
    component: 'fa',
    suffix: true,
    icons: {
      // if you have bought the Pro packages
      // list the icons you want to add, not listed icons will be tree-shaked
      solid: [
        'faChevronDown',
        'faChevronUp',
        'faSignInAlt',
        'faSignOutAlt',
        'faCheck',
        'faSearch',
        'faCloudUploadAlt',
        'faEye',
        'faEdit',
        'faTimes',
        'faCheckCircle',
        'faExchangeAlt',
        'faClock',
        'faSave',
      ],
      // include all icons. But dont do this.
      regular: [
        'faBell',
        'faSnowflake',
        'faCheckSquare',
        'faTimesCircle',
        'faSadCry',
        'faClock',
        'faMoneyBillAlt',
        'faSave',
      ],
      brands: [
        'faGithub',
        'faFontAwesome',
        'faWpforms',
        'faFacebook',
        'faInstagram',
        'faTwitter',
        'faPaypal',
      ],
    },
  },
],]

Como ves exportar los iconos es muy sencillo y los tendras disponibles en SVG y ahorraras mucho espacio de compilado

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.