Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 4 years ago
Comments:15 (3 by maintainers)

Top GitHub Comments

19reactions

PHPadawancommented, Aug 12, 2019

@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 😃

3reactions

noemi-mancinicommented, Dec 2, 2020

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.

Top Results From Across the Web

How to apply theme or customize Nebular icons?

I have to customize the icons like icon-font-size. I found the documentation here. <nb-icon icon="file-text-outline"></nb-icon>.

This pack consists of essential icons, such as close-outline , checkmark-outline , etc that are required by the Nebular components (modals, accordions, etc)....

Components - NativeBase

Renders icon with defined icon-size. Include this prop within style. type, Ionicons, AntDesign, Ionicons, Entypo, EvilIcons, Feather, FontAwesome, FontAwesome5, ...

Notification icon size. | B4X Programming Forum

I really can't understand why it shows on status bar and not in notification list. They are both set using the .icon property....

Font Awesome Icons Are Not Showing Angular 6 - ADocLib

Make sure you're using the latest and greatest by updating your CDN code reference, updating your Font Awesome package via npm, or downloading...