Fontawesome Pro – "brands" icons do not display
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.
Did you uncomment the following?
Yes, I did uncomment it.
I found more details on the problem. If you write this:
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”/>
Hi, Yes. This is the intended use.