cssangularfont-awesome

Upgrade to FontAwesome Pro in ASP.NET Zero (Angular) / fas far icons displaying as squares

I was asked to upgrade an ASP.NET Zero project with the Font Awesome Pro icons.

I followed the steps here Installing the Pro version of Font Awesome

After adding the below in the angular.json

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

I found that some of the pro fonts did not want to display specifically some of the solid(fas) and regular (far) fonts.

Solution

  • To fix the issue remove the vendor included Font Awesome Free css from the src\assets\metronic\vendors\global\vendors.bundle.css file

    enter image description here

    Be sure to remove the trailing comment on line 15 as well

    enter image description here

    After the above step be sure to replace all the instances of Font Awesome 5 Free with Font Awesome 5 Pro especially where they are referenced in .css files

    Please Note that I found some SVG files that contains the phrase 'Font Awesome 5 Free' which I think should remain there