Angular4-p菜单无法在菜单栏上看到图标
目前在我的项目中,我正在使用带有侧菜单功能的Angular 4.1。 右边我有汉堡包菜单图标。单击它,我想显示带有图标的标签 下面是我的代码Angular4-p菜单无法在菜单栏上看到图标,angular,twitter-bootstrap-3,menu,primeng,angular6,Angular,Twitter Bootstrap 3,Menu,Primeng,Angular6,目前在我的项目中,我正在使用带有侧菜单功能的Angular 4.1。 右边我有汉堡包菜单图标。单击它,我想显示带有图标的标签 下面是我的代码 汉堡菜单.template.html 在ngOnInit中,我调用了以下方法: this.menuItem() 功能实现: private menuItem(): void { this.items = [ { label: this.translate.instant('burgermainmenu.mycompany
this.menuItem()代码>
功能实现:
private menuItem(): void {
this.items = [
{
label: this.translate.instant('burgermainmenu.mycompanyrestaurantlabel'), icon: 'home-icon', command: (event) => {
this.arrowClick('home');
}
},
{
label: this.translate.instant('burgermainmenu.allcompanyrestaurantlabel'), icon: 'all-cafeteria-icon',
routerLink: ['../../cafe/cafeteria-list', 'list-view', { id: this.currentLocation }],
command: (event) => {
this.arrowClick('');
}
}]
应用程序模块.ts
从'@angular/platform browser/animations'导入{BrowserAnimationsModule}代码>
在@NgModule中,下面的内容已经导入
问题-根据上述实施,我无法在侧菜单中看到要标记的图标
任何帮助都是值得的 我找到了解决办法。我提到下面的步骤,以便将来如果有人遇到同样的问题,他可以找到解决方案
安装字体真棒
npm安装--保存字体awesome角度字体awesome
将字体awesome css文件添加到angular.json inside style元素中
“样式”:[
“/assets/css/styles.scss”,
“./node_modules/bootstrap/dist/css/bootstrap.min.css”,
“./node_modules/primeng/resources/primeng.min.css”,
“./node\u modules/font-awesome/css/font-awesome.css”,
“./节点\模块/力矩”
]
现在您可以执行下面的命令
npm安装
要在localhost上托管应用程序,请运行以下命令
npm启动
public items: MenuItem[];
private menuItem(): void {
this.items = [
{
label: this.translate.instant('burgermainmenu.mycompanyrestaurantlabel'), icon: 'home-icon', command: (event) => {
this.arrowClick('home');
}
},
{
label: this.translate.instant('burgermainmenu.allcompanyrestaurantlabel'), icon: 'all-cafeteria-icon',
routerLink: ['../../cafe/cafeteria-list', 'list-view', { id: this.currentLocation }],
command: (event) => {
this.arrowClick('');
}
}]
imports: [
BrowserModule,
HttpClientModule,
RouterModule.forRoot(ROUTES, { useHash: true }),
BrowserAnimationsModule,
SharedModule,
TranslateModule.forRoot({
loader: { provide: TranslateLoader, useClass: CustomLoader }
}),
AsyncLocalStorageModule,
LazyLoadImageModule
]