0

I am upgrading an Angular project to use the pro version of the Font Awesome 5 icons. Until now, the project was using only the free version (v5). It is evident that it has, at some point in its long history, also used version 4 since the build settings refer to the v4-shims.css file and there are many instances of icons that use the "-o" suffix.

We're trying to cut the ties with v4 entirely so I updated angular.json to replace these 2 css files:

"node_modules/@fortawesome/fontawesome-free/css/all.css",
"node_modules/@fortawesome/fontawesome-free/css/v4-shims.css"

with this 1 css file:

"node_modules/@fortawesome/fontawesome-pro/css/all.css"

After making this change, the icons that use the "-o" suffix are broken and I can't find any advice in the changelogs on how to upgrade properly and safely.

My project contains 800+ font awesome icon instances so I'm looking for a way to do this update without having to check every instance individually.

If I want to update code like this:

<i class="fa fa-square-o"></i>
  1. Is it ok to just remove the "-o" suffix?
  2. If I don't explicitly switch 'fa' to one of the v5 style options (fas, far, fal, fad) will one of them be used as the default and if so, which one?
  3. Is there a recommended way to cleanly migrate from v4 to v5 without using the v4 shims?

Thanks!

Rod Nolan
  • 71
  • 1
  • 2
  • 1
    The have an upgrade guide in their docs. It’s for upgrading from 4 to 6 but it says version 5 was the rebuild-from-scratch, so it should work for you: https://fontawesome.com/docs/web/setup/upgrade/upgrade-from-v4 – Luckyfella Mar 08 '22 at 20:39
  • 1
    Thanks, @Luckyfella, I just discovered this myself... AFTER, of course, I posted the question. Also, this sub section of that page (https://fontawesome.com/docs/web/setup/upgrade/upgrade-from-v4#outline-style-icons) explains how to migrate -o styles to the new syntax. – Rod Nolan Mar 08 '22 at 21:03
  • I've created arrays set of renamed icons on [Gist](https://gist.github.com/ve3/3563789a8606c4095847f31522928df6) based from their document. You may use it for search and replace with your editor. :) – vee Mar 12 '22 at 18:35

0 Answers0