使用FontAwesome图标包的角星云主题

Question

堆栈:角9.1.7，星云5.0.0，FontAwesome 5.13

我希望使用以下准则将Nebular使用的默认图标集(EvaIcons)更改为FontAwesome：

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

不幸的是，图标没有显示出来。我接近了，因为星云EvaIcons不再显示了。从DeveloperTools中，我可以看到nb-icon使用fa-user，但是没有显示任何内容。

Answer 1

您没有提供已安装或配置的内容。

但无论如何我的答案来了..。我已经成功地将FontAwesome加载到我的Nebular应用程序中。也就是说，不是替换EvaIcons，而是将它们添加到Eva中。

将FontAwesome.

• Include安装在您的angular.json

• Register中，在app.component

• Use中安装图标包，在星云中安装FontAwesome图标组件

。

在守则中：

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

这样，您可以使用Eva或FontAwesome图标，或从任何注册包。

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

Answer 2

使用下面的方法，

1. 安装字体-可怕的

npm install --save @fortawesome/fontawesome-free

1. 在angular.json文件

中添加样式

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

模块中的

1. 导入

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

imports: [
    NbIconModule,
],

component.ts中的

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

Component.html中的

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

我希望它能起作用