Angular 星云主题使用 FontAwesome 图标包

Question

The stack: Angular 9.1.7, Nebular 5.0.0, FontAwesome 5.13

I want to change the default icon set (EvaIcons) used by Nebular to FontAwesome using this guideline:

https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack

Unfortunately the icons are not getting displayed. I'm close because the Nebular EvaIcons are no longer displayed. From the DeveloperTools, i can see nb-icon using fa-user , but nothing is displayed.

Answer 1

You didn't provide what you have installed or configured.

But here comes my answer anyways... I have managed load FontAwesome into my Nebular app. That said, not replacing EvaIcons but adding them additionally to Eva.

1. install FontAwesome.
2. Include it in your angular.json
3. Register the icon package in app.component
4. Use the FontAwesome within Nebulars nb-icon component

In Code:

1. npm install --save @fortawesome/fontawesome-free

2. "styles": [..., "node_modules/@fortawesome/fontawesome-free/css/all.css", ...],
   "scripts": [..., "node_modules/@fortawesome/fontawesome-free/js/all.js", ...]

3. import { NbIconLibraries } from '@nebular/theme';
   @Component({
     selector: 'ngx-app',
     template: '<router-outlet></router-outlet>',
   })
   export class AppComponent implements OnInit {
     constructor(private iconLibraries: NbIconLibraries) {
       this.iconLibraries.registerFontPack('fas', { packClass: 'fas', iconClassPrefix: 'fa' });
       this.iconLibraries.registerFontPack('far', { packClass: 'far', iconClassPrefix: 'fa' });
       this.iconLibraries.registerFontPack('fab', { packClass: 'fab', iconClassPrefix: 'fa' });
       this.iconLibraries.setDefaultPack('far');
   ...

4. <nb-icon icon="arrow-right" pack="fas"></nb-icon>

(Maybe there is a better way of doing this, maybe loading the js isn't required idk...)

This way you may use either Eva or FontAwesome Icons, or from whatever registered pack.

Eva:         <nb-icon icon="SOME_ICON">                           </nb-icon>
FontAwesome: <nb-icon icon="SOME_ICON" pack="fas/far/fab/fal/fad"></nb-icon>

Answer 2

Use the below method,

1. Install font-awesome

npm install --save @fortawesome/fontawesome-free

2. Add styles in angular.json file

"styles": [
     "node_modules/@fortawesome/fontawesome-free/css/all.css",
 ],

3. import in modules

import { NbIconModule } from '@nebular/theme';

imports: [
    NbIconModule,
],

4. In component.ts

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

5. In Component.html

<nb-icon icon="instagram" pack="font-awesome"></nb-icon>

I hope it will work