2

我正在为我的项目使用 akveo/ngx-admin 主题。我需要自定义侧边栏菜单图标。nebular 带有 eva 图标，但我需要 fontawesome 图标。

试图更改“/node_modules/@nebular/theme/components/menu/menu-item.component.html”，但 html 更改未反映

<span *ngIf="menuItem.group">
  <!-- <nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon> -->
  <i class="{{menuItem.icon}}"></i>
  {{ menuItem.title }}
</span>
<a *ngIf="menuItem.link && !menuItem.url && !menuItem.children && !menuItem.group"
   [routerLink]="menuItem.link"
   [queryParams]="menuItem.queryParams"
   [fragment]="menuItem.fragment"
   [skipLocationChange]="menuItem.skipLocationChange"
   [attr.target]="menuItem.target"
   [attr.title]="menuItem.title"
   [class.active]="menuItem.selected"
   (mouseenter)="onHoverItem(menuItem)"
   (click)="onItemClick(menuItem);">
  <!-- <nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon> -->
  <i class="{{menuItem.icon}}"></i>
  <span class="menu-title">{{ menuItem.title }}</span>
</a>
<a *ngIf="menuItem.url && !menuItem.children && !menuItem.link && !menuItem.group"
   [attr.href]="menuItem.url"
   [attr.target]="menuItem.target"
   [attr.title]="menuItem.title"
   [class.active]="menuItem.selected"
   (mouseenter)="onHoverItem(menuItem)"
   (click)="onSelectItem(menuItem)">
  <!-- <nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon> -->
  <i class="{{menuItem.icon}}"></i>
  <span class="menu-title">{{ menuItem.title }}</span>
</a>
<a *ngIf="!menuItem.children && !menuItem.link && !menuItem.url && !menuItem.group"
   [attr.target]="menuItem.target"
   [attr.title]="menuItem.title"
   [class.active]="menuItem.selected"
   (mouseenter)="onHoverItem(menuItem)"
   (click)="$event.preventDefault(); onItemClick(menuItem);">
  <!-- <nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon> -->
  <i class="{{menuItem.icon}}"></i>
  <span class="menu-title">{{ menuItem.title }}</span>
</a>
<a *ngIf="menuItem.children"
   (click)="$event.preventDefault(); onToggleSubMenu(menuItem);"
   [attr.target]="menuItem.target"
   [attr.title]="menuItem.title"
   [class.active]="menuItem.selected"
   (mouseenter)="onHoverItem(menuItem)"
   href="#">
  <!-- <nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon> -->
  <i class="{{menuItem.icon}}"></i>
  <span class="menu-title">{{ menuItem.title }}</span>
  <nb-icon class="expand-state" [icon]="getExpandStateIcon()" pack="nebular-essentials"></nb-icon>
</a>
<ul *ngIf="menuItem.children"
    [class.collapsed]="!(menuItem.children && menuItem.expanded)"
    [class.expanded]="menuItem.expanded"
    [@toggle]="toggleState"
    class="menu-items">
  <ng-container *ngFor="let item of menuItem.children">
    <li nbMenuItem *ngIf="!item.hidden"
        [menuItem]="item"
        [class.menu-group]="item.group"
        (hoverItem)="onHoverItem($event)"
        (toggleSubMenu)="onToggleSubMenu($event)"
        (selectItem)="onSelectItem($event)"
        (itemClick)="onItemClick($event)"
        class="menu-item">
    </li>
  </ng-container>
</ul>

我已经评论了“nb-icon”并用“i”标签对其进行了更改以呈现 fontawesome 图标。

将菜单图标更改为 fontawesome 后出错

更改后的 menu-item.component.html（不反映）

pages-menu.ts（图标从 eva 更改为 fontawesome）

fontawesome 免费 css 被导入 angular.json 并且 fontawesome 图标在项目中正常工作。不知道该怎么办。任何事情都会有帮助，谢谢。

4

2 回答 2

1

尝试使用NbIconLibraries类似的服务将字体真棒添加到库中

constructor {
 ...
 private icons: NbIconLibraries,
 ...
} {
 this.icons.registerFontPack(...)
 // or
 this.icons.registerSvgPack(...)
}
于 2019-12-12T15:15:37.970 回答
1

你可以在你的项目中安装很棒的字体，并将下面的代码添加到你的父模块，即下面示例中的 PagesModule

export class PagesModule {
  constructor(iconsLibrary: NbIconLibraries){
    iconsLibrary.registerFontPack('fa', { packClass: 'fa', iconClassPrefix: 'fa' 
    });
  }
}
于 2020-05-17T14:09:04.653 回答