我在我的项目中使用 akveo/ngx-admin 主题。我需要自定义侧边栏菜单图标。 Nebular 带有 eva 图标,但我需要 fontawesome 图标。
尝试更改“/node_modules/@nebular/theme/components/menu/menu-item.component.html” 但 html 变化没有反射(reflect)
<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 免费 css 已导入 angular.json,并且 fontawesome 图标在项目中正常工作。不知道该怎么办。任何事情都会有帮助,谢谢。
最佳答案
尝试使用NbIconLibraries
服务将很棒的字体添加到库中
constructor {
...
private icons: NbIconLibraries,
...
} {
this.icons.registerFontPack(...)
// or
this.icons.registerSvgPack(...)
}
关于icons - @nebular 自定义菜单 (NbMenuComponent) html 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57187156/