Angular4 - p-menu 无法在菜单栏上看到图标答案

【问题标题】：Angular4 - p-menu not able to see icons on menu barAngular4 - p-menu 无法在菜单栏上看到图标
【发布时间】：2018-12-21 13:15:37
【问题描述】：

目前在我的项目中，我正在使用带有侧边菜单功能的 Angular 4.1。右侧我有汉堡菜单图标。点击它，我想显示带有图标的标签。

下面是我的代码

burger-menu.template.html

<div class="burger-menu-container">
  <p-menu [model]="items"></p-menu>
</div>

burger-menu.component.ts

从'primeng/primeng'导入{ MenuItem }；

在类中我声明了我的变量，例如：

public items: MenuItem[];

在 ngOnInit 中我调用了以下方法：

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

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

在@NgModule 下面的东西已经导入

imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(ROUTES, { useHash: true }),
    BrowserAnimationsModule,
    SharedModule,
    TranslateModule.forRoot({
      loader: { provide: TranslateLoader, useClass: CustomLoader }
    }),
    AsyncLocalStorageModule,
    LazyLoadImageModule
  ]

问题 - 根据上述实现，我无法在侧边菜单中看到图标。

任何帮助都是可观的。

【问题讨论】：

标签： angular twitter-bootstrap-3 menu primeng angular6

【解决方案1】：

我得到了解决方案。我在下面提到了步骤，因此如果将来有人遇到同样的问题，他可以找到解决方案。

安装 font-awesome

npm install --save font-awesome angular-font-awesome
在样式元素内的 angular.json 中添加 font-awesome css 文件

"styles": [ "./assets/css/styles.scss", "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/primeng/resources/primeng.min.css", "../node_modules/font-awesome/css/font-awesome.css", "../node_modules/moment" ]
现在你可以执行下面的命令了。

npm install
要在本地主机上托管应用程序，请运行以下命令

npm start

【讨论】：