<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** ``` ``` **Angular, Nebular** ``` ```

[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 notifications@github.com 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.

[dominikseger]

@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

[dominikseger]

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

2. 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 <fa-icon [icon]="['fas', 'images']"> 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.

[moritz31]

we are using nebular 7 with fontawesome icons 5 for angular and facing the same issue. I think the issue is that fontawesome needs to be binded by css fontawesome for angular use pure js with svg icons

[MincDev]

This is working for me. Mistake I made was that I added the "fa" as part of the icon name.

Changing this:

icon: {
            icon: 'fa-home',
            pack: 'solid',
},

to this, worked.

icon: {
            icon: 'home',
            pack: 'solid',
},