CODEWITHSUNDEEP
angular8font-awesome-5nebular
Rohit Dubey
Rohit Dubey

Reputation: 174

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

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.

Upvotes: 5

Views: 3164

Answers (4)

karlmnz
karlmnz

Reputation: 31

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.

Upvotes: 3

Agha Ali Abbas
Agha Ali Abbas

Reputation: 195

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.

Upvotes: 4

Tim
Tim

Reputation: 549

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

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

Upvotes: 0

user2282197
user2282197

Reputation: 65

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

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

Upvotes: 1

Related Questions