nebular: unable to render font awesome icons.

Issue type

I’m submitting a … (check one with “x”)

bug report
feature request

Issue description

Current behavior:

Using <ng-icon> tag with font awesome icons does not render the icons ( Image1.png ) <nb-icon icon="fas fa-home"></nb-icon>

However, using image tag <i class="fas fa-home"></i> renders it properly. ( Image2.png )

Nebular version 4.1.0 is using <nb-icon> everywhere instead of <i> for eg. In Menu Item. so upgrading to this version is breaking all font awesome icons.

Expected behavior:

<nb-icon icon="fas fa-home"></nb-icon> should work in version 4.1.0 of Nebular.

Steps to reproduce:

Install the following modules.

"@nebular/eva-icons": "^4.0.0-rc.8",
"@nebular/theme": "^4.1.0",
"@fortawesome/fontawesome-free": "^5.9.0",
"@angular/cli": "~8.0.6",
"@angular/compiler-cli": "~8.0.3"

Related code:

insert short code snippets here

Other information:

npm, node, OS, Browser

<!--
Node, npm: `node --version` and `npm --version`
OS: Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
Browser: Chrome/Safari/Firefox/etc?
-->

Angular, Nebular

<!--
Check your `package-lock.json` or locate a `package.json` in the `node_modules` folder.
-->

About this issue

Original URL
State: open
Created 5 years ago
Comments: 15 (3 by maintainers)

Most upvoted comments

@yggg My final solution for font awesome pro looks like this now, the missing piece was the packClass parameter:

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

Maby you can extend the documentation with the list of the parameters for the registerFontPack method. Thank you for your hard work, love Nebular 😃

+20

dominikseger on Aug 12, 2019

Same as @lmarcelocc , I can make the icons be rendered when using the fa-icon tag with relative directive, but not in a context menu.

I registered the pack as indicated above.

More info: using Nebular 6 and FA5.

noemi-mancini on Dec 2, 2020

This is still opened. Any news about it?

I can’t get it to work.

Only the <fa-icon [icon]=“[‘fas’, ‘images’]”></fa-icon> is rendering the icon.

This is not working as well: app.module.ts

constructor(library: FaIconLibrary, private iconLibraries: NbIconLibraries) {
    // Font awesome fas: solid
    library.addIconPacks(fas);

    this.iconLibraries.registerFontPack('font-awesome-solid', { packClass: 'fas', iconClassPrefix: 'fa' });
}

pages-menu.ts

{
   title: 'Sensors',
   link: '/',
   icon: { icon: 'images', pack: 'font-awesome-solid' },
}

lmarcelocc on Nov 24, 2020

@yggg My final solution for font awesome pro looks like this now, the missing piece was the packClass parameter:
  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');
Maby you can extend the documentation with the list of the parameters for the registerFontPack method. Thank you for your hard work, love Nebular 😃

Thank you, that worked for me too.

Using free FontAwesome with Eva default icons, had to do it like this:

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

On pages-menu.ts

title: 'Reports',
icon: {
  icon: 'chart-bar',
  pack: 'regular',
},
link: '/pages/administration/reports',

renanaribeiro on Nov 29, 2019

In order to render font-awesome successfully you need to update nebular to 4.6.0 (minimum), then you need to do the following

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

Use this icon pack in nb icons

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

aghaaliabbas on May 4, 2020

Doesnt really work https://github.com/akveo/ngx-admin/issues/1524

epicquestgames on Jul 30, 2019