Possible issues in use of Font Awesome

[flodolo]

fa vs fas

The prefix fa was deprecated in favor of fas in v5 (which we're currently using)
https://docs.fontawesome.com/v5/web/reference-icons

The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.

Use of far

We seem to be using far in a few places (e.g. admin), but as far I can tell we only get "solid" (fas) and "brand" (fab) with a free plan.

Also, is this line correct?

.toggleClass('fa far fa-circle fa-dot-circle enabled');

Other

Is fa-w still valid? I think it might have been dropped from v5

https://github.com/mozilla/pontoon/blob/main/translate/src/modules/search/components/SearchPanel.tsx#L41-L45

[flodolo]

Regarding far, this is clearly working in messaging/sent/, so I'm either missing something, or the documentation is incorrect.

[flodolo]

Also, is this line correct?

.toggleClass('fa far fa-circle fa-dot-circle enabled');

Yes, because it toggles any of the classes listed 🙄
https://api.jquery.com/toggleClass/

[flodolo]

If we want to replace fa with fas, I have a work-in-progress branch (it's a lot more work than I expected)
https://github.com/mozilla/pontoon/compare/main...flodolo:update_fa_references?expand=1

[flodolo]

Is fa-w still valid? I think it might have been dropped from v5

One more discovery: the current version of font-awesome-all.css in Pontoon doesn't have a CSS rule for fa-w.

But v6 from #3504 has a rule

.fa-w {
  --fa: "\57";
}

That's just the letter W (0x0057).

[flodolo]

All issues were covered by
#3504
#3508
#3509