升级到 Nebular 4 已停止显示超赞字体图标。设置包也不起作用

Question

升级 Angular 版本 8 后，Nebular 更新到版本 4。升级后，我看不到之前显示的超赞字体图标。

我试着浏览了这个 nebular 文档，它要求我们将 font awesome 注册为默认包。但即使这样做也行不通。 https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack.

找不到关于此问题的足够讨论。 Font awesome 已经包含在我的 angular.json 文件中

constructor(private iconService: NbIconLibraries) {
    this.iconService.registerFontPack('font-aweome');
    this.iconService.setDefaultPack('font-aweome');
}

Nebular 应该接受字体超棒的图标。

Answer 1

问题在这里打开：https://github.com/akveo/ngx-admin/issues/1524

有人知道如何包含 Font Awesome PRO 图标吗？！

Answer 2

创建一个 .npmrc 文件并添加：

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=<TOKEN>

来自[https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers#installing-pro]

安装 npm 包

免费

npm i -D @fortawesome/fontawesome-free

专业版

npm i -D @fortawesome/fontawesome-pro

现在例如在 ngx-admin 中需要注册 FontPacks 并在 app.component.ts.

中设置一个默认值

（编辑注意：最初我表示要将以下内容添加到 pages.component.ts，这是错误的地方，好像页眉组件中的菜单在页面组件之外，即使菜单不使用 FA 图标，当您单击该菜单时，Web 应用程序也会挂起浏览器，因此请确保添加到 app.component.ts 以确保所有菜单现在都关于它。）

import '@fortawesome/fontawesome-pro/css/all.css';
import '@fortawesome/fontawesome-pro/js/all.js';

...

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

来自 [https://github.com/akveo/nebular/issues/1677]

此时在pages.menu.ts中说配置nb-menu可以只将FA图标名称添加到图标属性中例如：

export const MENU_ITEMS: NbMenuItem[] = [
    {
        title: 'Some Title',
        icon: 'location',
        link: '/your/link'
    }
];

这导致显示 'fad fa-location'，因为双色调是字体包集。

Answer 3

我认为你只是有一个拼写错误 - 将语句更改为：

this.iconService.registerFontPack('font-awesome');
this.iconService.setDefaultPack('font-awesome');

Answer 4

为了显示fontawesome，您需要注册图标包并将您的nebular 版本升级到4.6.0。要注册图标包，您需要在 app.component.ts

中执行此操作

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

然后在菜单项中你可以像这样使用它

{ title: 'wallet', icon: { icon: 'fa-eur', pack: 'font-awesome' }, link: '/home/dashboard', }

希望这对您有所帮助。

升级到 Nebular 4 已停止显示超赞字体图标。设置包也不起作用

Upgrade to Nebular 4 has stopped displaying font awesome icons. Setting pack is also not working

angular8

font-awesome-5

nebular