Upgrade to Nebular 4 has stopped displaying font awesome icons. Setting pack is also not working

Question

After upgrade of Angular version 8, Nebular got updated to version 4. After the upgrade I cannot see my font awesome icons that was getting displayed earlier.

I tried going through this document of nebular which is asking us to register font awesome as default pack. But even doing this it is not working. https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack.

Could not find enough discussion on this issue. Font awesome is already included and also I have added it inside my angular.json file

constructor(private iconService: NbIconLibraries) {
    this.iconService.registerFontPack('font-aweome');
    this.iconService.setDefaultPack('font-aweome');
}

Nebular should accept font-awesome icons.

Cradling

Answer 1

In order to display fontawesome you will need to register icon packs and upgrade your nebular version to 4.6.0. In order to register icon pack you need to do this in app.component.ts

constructor(private iconLibraries: NbIconLibraries){ this.iconLibraries.registerFontPack('font-awesome', { packClass: 'fa' }); }

then in the menu Items you can use it like this

{ title: 'wallet', icon: { icon: 'fa-eur', pack: 'font-awesome' }, link: '/home/dashboard', }

Hopefully this helps.

Butlery

Answer 2

Create a .npmrc file and add:

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=<TOKEN>

From [https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers#installing-pro]

Install npm package

For FREE

npm i -D @fortawesome/fontawesome-free

For PRO

npm i -D @fortawesome/fontawesome-pro

Now for example in ngx-admin need to register the FontPacks and set one as default in the app.component.ts.

(EDIT NOTE: originally I indicated to add the below to the pages.component.ts, this is the wrong place as if there is a menu in the header component which is outside the pages component, even if the menu doesn't use FA icons, the web app will hang the browser when you click on that menu, so make sure to add to app.component.ts to ensure all menus now about it.)

import '@fortawesome/fontawesome-pro/css/all.css';
import '@fortawesome/fontawesome-pro/js/all.js';

...

  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');
  }

From [https://github.com/akveo/nebular/issues/1677]

And at this point say in the pages.menu.ts to configure nb-menu can just add the FA icon names to the icon attributes e.g.:

export const MENU_ITEMS: NbMenuItem[] = [
    {
        title: 'Some Title',
        icon: 'location',
        link: '/your/link'
    }
];

which result in 'fad fa-location' being shown because the duotone is the font pack set.

Deserving

Answer 3

Issue opened here: https://github.com/akveo/ngx-admin/issues/1524

Anyone has other idea how to include Font Awesome PRO icons ?!

Lierne

I am still facing the issue. Even after registering the pack it is not accepting. In console I get error as fa fa-home is not part of eva icons pack. Which means my default pack registration is not working. – Cradling

did u find any solution to this issue? – Trying

Answer 4

I think you just have a spelling mistake - change the statements to this:

this.iconService.registerFontPack('font-awesome');
this.iconService.setDefaultPack('font-awesome');

Magdalen