nuxtjs Fontawesome some icons not able to display

Question

Hi I have like to use some fontawesome icons such as Twitter icon.

In my nuxt.config.js, I have those lines below:

fontawesome: {
component: "fa",
icons: {
  solid: true,
  brands: true
 }
},

In html, I have these lines below:

  <fa icon="envelope"></fa>
  <fa icon="twitter"></fa>

However, the envelop is able to display but not the Twitter icon. Do I miss anything?

Answer 1

The correct way to specify the icons in html should be:

  <fa :icon="['fas', 'envelope']" />
  <fa :icon="['fas', 'lock']" />
  <fa :icon="['fas', 'sign-in-alt']" />
  <fa :icon="['fab', 'google']" />
  <fa :icon="['fab', 'linkedin']" />
  <fa :icon="['fab', 'twitch']" />