@fortawesome/angular-fontawesome and unicode-CodePudding

I am upgrading font-awesome in my angular application earlier we were having hardcoded the URL of font-awesome (from CDN ) in style.scss file, now we got to have an angular package which is as below:

ng add @fortawesome/[email protected] and also similar SVG icons.

and we have changed the approach from <i ><i> to <fa-icon icon="faLock"></fa-icon>

Now the challenging stuff here is that in my existing application we have used unicode as below:

ui li:before {
content: '\f138';
font-family: FontAwesome;
}

I have changed the above to below

ui li:before {
    content: '\f01';
    font-family: Font Awesome 5 Free;
    }

but icons are not coming up, do we still need to define the .css file in angular.json to work for Unicode (the path of fort-awesome of node_modules )?

Please note that my version of fortawesomesupportsfont-awesome version 5 `.

ADDED packages

    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.0",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",

Angular version :6;

CodePudding user response：

Ok, if you inspect your code where you use you new icons, you should see something like that :

That means that you don't have the css way to display FA icons :

.fa, .fas {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

So you can't use the unicode trick to display an icon anymore. Unless, on top of the angular svg FA library, you install the "web" way : https://fontawesome.com/v5/docs/web/setup/get-started. You will then have a regular font-family that you will be able to use.

Tell me if the part about the SVG makes sense to you if I expressed it correctly. Cheers.