Nebular: <nb-icon> unable to render font awesome icons.

[aniketkadu2002]

Issue type

I'm submitting a ... (check one with "x")

• [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:

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.
-->

[emalamisura-c2m]

I actually avoid using nb-icon entirely because it renders blurry icons.

[yggg]

@aniketkadu2002 icon input expects a single icon as a parameter. See icon docs for details, you can find font awesome example here under the 3rd-party/Custom CSS Pack section.

@emalamisura-c2m Could you please provide more details like what icons do you use (svg or font) or maybe pack name. We'd look into the issue

[emalamisura-c2m]

I was using svg, even your demo the icon is blurry. Not sure how you don't
notice that, it looks terrible.

On Thu, Jul 18, 2019 at 7:55 AM Sergey Andrievskiy [e-mail]
wrote:

@aniketkadu2002 https://github.com/aniketkadu2002 icon input expects a
single icon as a parameter. See icon docs for details, you can find font
awesome example here
https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack
under the 3rd-party/Custom CSS Pack section.

@emalamisura-c2m https://github.com/emalamisura-c2m Could you please
provide more details like what icons do you use (svg or font) or maybe pack
name. We'd look into the issue

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/akveo/nebular/issues/1677?email_source=notifications&email_token=ALBENYHDP7G25TQ22D6PCNDQABK45A5CNFSM4H4765D2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2IHTOI#issuecomment-512784825,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALBENYFWAG5P5G7YK35B2FDQABK45ANCNFSM4H4765DQ
.

--
Eric Malamisura
IT Manager
Click2Mail - http://www.click2mail.com
540.840.2475

---

The information contained in this transmission may contain privileged and
confidential information, including patient information protected by
federal and state privacy laws. It is intended only for the use of the
person(s) named above. If you are not the intended recipient, you are
hereby notified that any review, dissemination, distribution or duplication
of this communication is strictly prohibited. If you are not the intended
recipient, please contact the sender by reply email and destroy all copies
of the original message.

--
The information contained in this transmission may contain privileged and
confidential information, including patient information protected by
federal and state privacy laws. It is intended only for the use of the
person(s) named above. If you are not the intended recipient, you are
hereby notified that any review, dissemination, distribution or duplication
of this communication is strictly prohibited. If you are not the intended
recipient, please contact the sender by reply email and destroy all copies
of the original message.

[yggg]

Oh, I’m so sorry to hear that @emalamisura-c2m

even your demo

Could you share a link to the demo you watching?

Also please describe your OS, browser, screen resolution. And if you could, add a screenshot.

[PHPadawan]

@yggg if the icon parameter expects only input how can I distinguish between regular,solid and light icons?

what exactly do I have to type in .registerFontPack(), the name from the imported .css file in angular.json?

i am pretty new to angular and struggle to get font awesome 5 pro working with nebular.

[yggg]

@PHPadawan as a first parameter of registerFontPack method you can specify whatever name you want to use as a pack name. For example when you register icon pack like this:
this.iconLibraries.registerFontPack('font-awesome', { iconClassPrefix: 'fa' })
then you need to specify font-awesome as a pack input of nb-icon, like this:
<nb-icon icon="home" pack="font-awesome">

how can I distinguish between regular, solid and light icons

I'm not familiar with font awesome pro. If icon type depends on class like fa, fas, etc. you need to register different icon packs for each type:

this.iconLibraries.registerFontPack('fa', { iconClassPrefix: 'fa' });
this.iconLibraries.registerFontPack('fas', { iconClassPrefix: 'fas' });

and then use like this:

<nb-icon icon="home" pack="fa">
<nb-icon icon="home" pack="fas">

[epicquestgames]

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

[PHPadawan]

@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 :)

[renanaribeiro]

@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',

[aghaaliabbas]

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

1. Register icon pack:

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

1. Use this icon pack in nb icons

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

[KartikGoyal]

icon:

Thanks, its working

[lmarcelocc]

This is still opened. Any news about it?

I can't get it to work.

Only the 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' }, }

[noemi-mancini]

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.