Fontawesome Pro – "brands" icons do not display

  • Hi,
    Installing and using Fontawesome Pro is working fine with solid and regular but the brands icons are not displayed.
    I found in browser dev tool that the “fa-brand-etc.css” file is not loaded by the browser (no error raised in console) but correctly configured in “plugins/fontawesome-pro.js”, and server files are correctly located like for the fa-solid, i.e.:

    …/node_modules/@fortawesome/fontawesome-pro-webfonts/webfonts/fa-brands-400.woff2 (and the other formats)

    I develop with “quasar dev -m pwa -t ios” and build with “quasar build -m pwa -t ios” but nothing is displayed for brands icons.

    Any clues?


  • Admin

  • Yes, I did uncomment it.
    I found more details on the problem. If you write this:
    <q-item-side icon=“fa-twitter”/>
    it is translated in the browser to:
    <div class=“q-item-side q-item-section q-item-side-left”><i aria-hidden=“true” class=“q-icon fa fa-twitter q-item-icon”> </i></div>

    THE PROBLEM IS THEN that the class word “fa” should be “fab” for tag <i> since it is a brand icon. Then class should equal :
    class=“q-icon fab fa-twitter q-item-icon”

    I don’t know how to inject the “fab” class instead of “fa”.

    It this a bug yet?

  • Solution is very simple :
      <q-item-side icon=“fab fa-twitter”/>

  • Admin

    Hi, Yes. This is the intended use.