Angular Nebular 主题使用 FontAwesome 图标包答案

【问题标题】：Angular Nebular theme using FontAwesome icon packAngular Nebular 主题使用 FontAwesome 图标包
【发布时间】：2021-06-03 21:50:03
【问题描述】：

堆栈：Angular 9.1.7、Nebular 5.0.0、FontAwesome 5.13

我想使用以下指南将 Nebular 使用的默认图标集 (EvaIcons) 更改为 FontAwesome：

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

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

【问题讨论】：

你在 angular.json 中导入了 font-aswesome css 文件？
你能分享一个链接来参考配置吗，在官方文档上我没有看到 CSS 导入步骤。

标签： angular font-awesome nebular ngx-admin

【解决方案1】：

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

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

安装 FontAwesome。
将其包含在您的 angular.json 中
在app.component中注册图标包
在 Nebulas nb-icon 组件中使用 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>

【讨论】：

这应该是正确的答案 - 通过这个实现，字体真棒图标将正确加载。

【解决方案2】：

使用下面的方法，

安装 font-awesome

npm install --save @fortawesome/fontawesome-free

在 angular.json 文件中添加样式

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

在模块中导入

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>

我希望它会起作用

【讨论】：