Fontawesome Pro v6 is not working

[VictorLNoCapInc]

What happened?

I tried to install fontawesome-pro v6 following that guide :
https://quasar.dev/options/installing-icon-libraries#using-fontawesome-pro

But when I try to display simple icon such as :
<q-icon name="fa-regular fa-bell" />

The icon shows a small cube.

What did you expect to happen?

I expect to get fontawesome v6 pro icons

Reproduction URL

https://codesandbox.io/s/fontawesome-v6-pro-r41uce

But I didn't added my private token for fontawesome pro... So Reproduction project is just to see other files.

How to reproduce?

Just create from scratch a new Quasar project,
Then Follow https://quasar.dev/options/installing-icon-libraries#using-fontawesome-pro steps with your pro token.

Then add icon on from page:
<q-icon name="fa-regular fa-bell" />

And see result.

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Quasar Extras (@quasar/extras)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Windows_NT(10.0.22000) - win32/x64
NodeJs - 12.22.1

Global packages
  NPM - 6.14.12
  yarn - 1.22.4
  @quasar/cli - 1.1.2
  @quasar/icongenie - 2.3.2
  cordova - Not installed

Important local packages
  quasar - 2.6.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 3.3.3 -- Quasar Framework local CLI
  @quasar/extras - 1.13.3 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.14
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.17.7 -- Babel compiler core.
  webpack - 5.70.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.7.4 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

[charloai]

Me too.
How to deal with this?

[vykimo]

Mee too. Need to use FontAwesome Pro v6 asap with Amazing Quasar ! ;)

[rstoenescu]

ping @hawkeye64

[hawkeye64]

@VictorLNoCapInc
Can you also try the old way?

<q-icon name="far fa-bell" />

Can you tell me if that also works or does not?

[hawkeye64]

I don't seem to be having an issue with this. I got the free version of Pro, so not allowed to download it, but put it into index.template.html instead:

and

[VictorLNoCapInc]

I don't have the issue too with FontAwesome V6 regular. I only have it with FA v6 PRO.
If you want I can provide you my Secret Key by PM for you to test. Just ping me a message if needed.

[VictorLNoCapInc]

And old way is working well.

[hawkeye64]

I don't have the issue too with FontAwesome V6 regular. I only have it with FA v6 PRO. If you want I can provide you my Secret Key by PM for you to test. Just ping me a message if needed.

Yes, thank you. That would be helpful to me. Just ping me on Discord.

[hawkeye64]

Quasar (QIcon) needs an update, but I am now able to do this:

[hawkeye64]

This is a better representation:

[hawkeye64]

    <div class="full-width row justify-evenly items-center q-pa-md q-gutter-sm">
      <div class="column items-center">
        fa-regular fa-bell
        <q-icon name="fa-regular fa-bell" size="lg" />
      </div>
      <div class="column items-center">
        fa-brands fa-twitter
        <q-icon name="fa-brands fa-twitter" size="lg" />
      </div>
      <div class="column items-center">
        fa-regular fa-bridge-suspension
        <q-icon name="fa-regular fa-bridge-suspension" size="lg" />
      </div>
      <div class="column items-center">
        fa-solid fa-bridge-suspension
        <q-icon name="fa-solid fa-bridge-suspension" size="lg" />
      </div>
      <div class="column items-center">
        fa-light fa-bridge-suspension
        <q-icon name="fa-light fa-bridge-suspension" size="lg" />
      </div>
      <div class="column items-center">
        fa-thin fa-bridge-suspension
        <q-icon name="fa-thin fa-bridge-suspension" size="lg" />
      </div>
      <div class="column items-center">
        fa-duotone fa-bridge-suspension
        <q-icon name="fa-duotone fa-bridge-suspension" size="lg" />
      </div>
    </div>
    ```

[hawkeye64]

I have pushed the commit and will be in the next Quasar release.

[hawkeye64]

@VictorLNoCapInc Also, please update your @quasar/cli

npm i -g @quasar/cli

[hawkeye64]

Here is my boot file if anyone is interested:

import { boot } from 'quasar/wrappers'

import '@fortawesome/fontawesome-pro/css/fontawesome.css'
import '@fortawesome/fontawesome-pro/css/light.css'
import '@fortawesome/fontawesome-pro/css/brands.css'
import '@fortawesome/fontawesome-pro/css/solid.css'
import '@fortawesome/fontawesome-pro/css/regular.css'
import '@fortawesome/fontawesome-pro/css/thin.css'
import '@fortawesome/fontawesome-pro/css/duotone.css'

// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
export default boot(async (/* { app, router, ... } */) => {
  // something to do
})

And, you have to do this before adding the package to your package.json:

npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" FONT-AWESOME-PACKAGE-TOKEN

As specified here: https://fontawesome.com/docs/web/setup/packages#set-up-npm-token-for-all-projects
and Quasar docs: https://quasar.dev/options/installing-icon-libraries#using-fontawesome-pro

[rstoenescu]

Fix will be available in Quasar v2.6.2

[DaleMckeown]

@hawkeye64 I need tree shaking, the assets for Font-Awesome are huge for the entire pro set, considering there are 26k icons and more coming.

How is this doable with SVGs?

I've managed to pull out the code and related utils from https://github.com/quasarframework/quasar/blob/dev/extras/build/fontawesome-v6.js and have successfully generated the equivalent files of https://github.com/quasarframework/quasar/tree/dev/extras/fontawesome-v6 (minus font assets that I don't want/need), e.g:

I'm importing these into my project and my duotone items are not showing as duotone:

import { faDuotoneGlobePointer } from '@common-web-design-font-awesome-pro';

...

 <QIcon size="xl" name={faDuotoneGlobePointer} style="--fa-secondary-opacity: 0.1;" />

Expected output is:

It seems that the SVG extraction process simply grabs the PATH of the SVG image and assigns it to the const variable. I can't see how font-awesome utilities such as changing opacity via style="--fa-secondary-opacity: 0.1;" is possible either.

I've no idea where I go from here - I need font awesome duotone icons. The only thing I can think of is to ditch QIcon altogether and use the Font-Awesome Vue 3 component directly.