How can add font-awesome pro?

[Denni]

My vue app generated by @vue/cli and quasar was added via vue-cli 3 plugin. How can I add font-awesome pro in my project?

[digiproduct]

@Denni Here you go … it’s already in the docs …

https://v1.quasar-framework.org/options/installing-icon-libraries#Using-Fontawesome-Pro

[Denni]

@digiproduct I read the docs. And failed in step 4:
Create new boot file:
$ quasar new boot fontawesome-pro

what am I doing wrong?

[digiproduct]

@Denni sorry, I don’t have it installed although I’m considering doing it.

I just happened to have the link to the docs page handy when I saw your message, so posted it up for your convenience.

[digiproduct]

@Denni ah … but … is this because you’re trying to run Quasar in the folder where you downloaded rather than in your actual project folder?

[Denni]

@digiproduct I tried to do it in the project folder. But the quasar does not know the command “new”, which is described in the documentation

[rstoenescu]

@Denni

You’re using @vue/cli, so don’t try Quasar CLI commands cause they obviously won’t work
So in your case follow step 1 -> 2 -> 3 then 6 (add that to your main.js without wrapping with the default export).

[Denni]

@rstoenescu after steps 1, 2, 3 my project folder look like this:
Folder src/boot missing. What do I need to do?

[rstoenescu]

You’ve chosen the @vue/cli path, so you don’t have boot folder. That’s a Quasar CLI feature.
Like I indicated above, do step 1 then step 2 then step 3 then jump to step 6 (where you add that to your main.js without wrapping with the default export)

[lilinazif74]

@digiproduct Thank you very much for sharing this link

[Denni]

@rstoenescu thank You very very! This work!

[digiproduct]

@lilinazif74 My pleasure

[Denni]

@rstoenescu
my main.js:

import './config/quasar';
import '@fortawesome/fontawesome-pro/css/fontawesome.min.css'
//import '@fortawesome/fontawesome-pro/css/brands.min.css'
import '@fortawesome/fontawesome-pro/css/light.min.css'
import '@fortawesome/fontawesome-pro/css/solid.min.css'
import '@fortawesome/fontawesome-pro/css/regular.min.css'

my ./config/quasar

import Vue from 'vue'
import {
  Quasar,
  ...
} from 'quasar'
import iconSet from 'quasar/icon-set/fontawesome-v5.js'

Vue.use(Quasar, {
  ...
  iconSet,
});

My template:

<q-icon
  name="fal fa-atom-alt"
/>
<q-icon
  name="fas fa-atom-alt"
/>
<q-icon
  name="far fa-atom-alt"
/>

fas and far icons are visible for one moment only. Then:

Help me please. How do I fix this?

[Denni]

I replaced in my “./config/quasar”

//import iconSet from 'quasar/icon-set/fontawesome-v5.js'
import iconSet from '@fortawesome/fontawesome-pro/js/all.min';

and all work fine!