Ngx-admin: Font Awesome Icons are not shown

[Alpayyil]

Copied the HTML, SCSS & TS from :
https://github.com/akveo/ngx-admin/tree/master/src/app/pages/ui-features/icons

Actually just copied the HTML Snippet for the card, the Array for the icons and the whole SCSS.

Also tried to use the Font Awesome Icons on the Sidebar and I don´t get any Icon shown.

The Nebular Icons work.

Any suggestion ?

[garunski]

Have you tried installing 'font-awesome' and adding "../node_modules/font-awesome/scss/font-awesome.scss", to the .angular-cli.json?

[esmiralha]

Also the icons must be referenced as "fa fa-*".

[gljdhiotirep]

If you want to use the current icons and documentation in https://fontawesome.com you have to update the font-awesome package to the last version, the current version is 5.0.13 while the used version in the ngx-admin demo is 4.7.0.
The icons must be referenced as "fa fa-" in the v4.7.0, when you update the font-awesome package you must use "fas fa-".
All respect for ngx-admin team.

[tungdt-90]

I follow this official link to update font-awesome to version 5 free, but the icon still not showing up.
Much appreciate to anyone can help me with this.

Thanks.

[deadlyacid]

@tungdt-90

I had the same issue and follow their instruction and it works,
If you're using the free version don't set the npm config, If you already did remove it like so:

npm config delete "@fortawesome:registry"
npm config delete "//npm.fontawesome.com/:_authToken"

after you've installed the package
npm install --save-dev @fortawesome/fontawesome-free

in your angular.json add
"node_modules/@fortawesome/fontawesome-free/js/all.js"
"node_modules/@fortawesome/fontawesome-free/css/all.css"

Each one in the right block (scripts/styles), notice that there are twice of those blocks, for tests & build
just add to both.

then build your app and it should work.

[Alpayyil]

Thanks for all the helpful comments! I am not working on the project anymore though, so i can't confirm any of the suggestions. Still, I hope your answer will help someone else in my place.

[PHPadawan]

@deadlyacid do I have to consider something else when using fontawesome-pro because it does not work for me.

[epicquestgames]

Same here, I've added required npm module, added references to angular.json and defined eva packs:

 constructor(private analytics: AnalyticsService,
    private iconLibraries: NbIconLibraries) {
      this.iconLibraries.registerFontPack('fa', { iconClassPrefix: 'fa' });
      this.iconLibraries.registerFontPack('fas', { iconClassPrefix: 'fas' });
      this.iconLibraries.registerFontPack('fad', { iconClassPrefix: 'fad' });
      this.iconLibraries.registerFontPack('fal', { iconClassPrefix: 'fal' });
      this.iconLibraries.setDefaultPack('fad');
  }

[PHPadawan]

Maby the _packClass_ Parameter is the thing some of you are looking for. My constructor for font awesome pro icons looks like this:

constructor(private iconLibraries: NbIconLibraries) {
    this.iconLibraries.registerFontPack('solid', {packClass: 'fas', iconClassPrefix: 'fa'});
    this.iconLibraries.registerFontPack('regular', {packClass: 'far', iconClassPrefix: 'fa'});
    this.iconLibraries.registerFontPack('light', {packClass: 'fal', iconClassPrefix: 'fa'});
    this.iconLibraries.registerFontPack('duotone', {packClass: 'fad', iconClassPrefix: 'fa'});
    this.iconLibraries.registerFontPack('brands', {packClass: 'fab', iconClassPrefix: 'fa'});

    this.iconLibraries.setDefaultPack('duotone');

[snowPu]

This still doesn't work. Has anybody found a solution?

[ivan-a-souza]

According to the documentation, the NbMenuItem icon parameter should accept string or icon options, but is set to accept only string (Line 41). So, continue with the problem. At the menu-item-component.html has no property for pack.

[alinadirkhanloo]

Thanks

[kjdeepak]

Maby the _packClass_ Parameter is the thing some of you are looking for. My constructor for font awesome pro icons looks like this:

constructor(private iconLibraries: NbIconLibraries) {
    this.iconLibraries.registerFontPack('solid', {packClass: 'fas', iconClassPrefix: 'fa'});
    this.iconLibraries.registerFontPack('regular', {packClass: 'far', iconClassPrefix: 'fa'});
    this.iconLibraries.registerFontPack('light', {packClass: 'fal', iconClassPrefix: 'fa'});
    this.iconLibraries.registerFontPack('duotone', {packClass: 'fad', iconClassPrefix: 'fa'});
    this.iconLibraries.registerFontPack('brands', {packClass: 'fab', iconClassPrefix: 'fa'});

    this.iconLibraries.setDefaultPack('duotone');

Guys this works. Try it out. Just add packClass as mentioned in this comment.

[Neelaka-Rupun]

This issue occurred because of the version inconsistency.
currently using [email protected] like wise and using version 5 icon statement to implement it to HTML and then the icon is not showing.
To use the icons make sure the font-awesome node version is higher than the icon version