4

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

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

在这个问题上找不到足够的讨论。字体真棒已经包含在内，我也将它添加到我的 angular.json 文件中

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

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

4

4 回答 4

3

创建一个 .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'
    }
];

这导致显示“时尚 fa-location”，因为双色调是字体包集。

于 2019-10-07T00:16:10.540 回答
3

为了显示 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', }

希望这会有所帮助。

于 2020-05-04T09:21:57.047 回答
1

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

任何人都有其他想法如何包含 Font Awesome PRO 图标？！

于 2019-07-30T22:31:55.877 回答
0

我认为您只是拼写错误-将语句更改为：

this.iconService.registerFontPack('font-awesome');
this.iconService.setDefaultPack('font-awesome');
于 2020-04-24T21:58:32.163 回答