PrimeNG按钮未在angular2中显示fa图标和标签答案

【问题标题】：PrimeNG button not displaying fa icon and label in angular2PrimeNG按钮未在angular2中显示fa图标和标签
【发布时间】：2017-07-27 17:53:56
【问题描述】：

我想在面板标题中显示添加和删除按钮。下面的代码显示没有图标和标签的按钮

<p-panel>
  <p-header>
   <div>
     Registration Form
     <button type="button" pButton icon="fa-plus" style="float:right" label="Add">
     </button>
   </div>
  </p-header>
</p-panel>

【问题讨论】：

Primeng Button not showing label的可能重复
你使用的是什么网络服务器？

标签： angular primeng

【解决方案1】：

您的代码运行良好here。

您是否已将font-awesome 导入您的应用程序？如果没有，请将其添加到您的 index.html 中的 <head></head> 标记中。

<head> 
...
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 </head>

另外，您需要将ButtonModule, PanelModule 导入您的应用程序。

import {ButtonModule, PanelModule} from 'primeng';

@NgModule({

  imports: [
    ...
    ButtonModule,
    PanelModule,
    ...
  ],
  ...
})

【讨论】：

你的代码很好。它在我的 plunker 中工作。它必须是某种配置问题。你看到屏幕上的面板了吗？
是的，我可以看到带有标题的面板。按钮显示为空白。
你能在你的问题中添加你的app.module.ts吗？
添加了 app.module.ts
我在您的 app.module.ts 中没有看到 import {ButtonModule, PanelModule} from 'primeng'; 声明。我在imports 中看到了它们，但如果没有 import 语句，它们将无法工作。此外，您在问题中提到 pButton 在JobCleanupComponent 中工作。您是否再次在该组件中导入 primeng 模块？

【解决方案2】：

导入 BrowserAnimationsModule 后，面板内会显示primeng Buttons。

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

【讨论】：

【解决方案3】：

如果您使用 angular2/4，则需要将以下导入添加到您的 app.module.ts

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

【讨论】：

是但不一定是 app.module.ts - 需要添加到正在使用它的模块中 - +1

【解决方案4】：

您的示例代码中有一些结构错误。我已经为你创建了一个 plnkr。

http://plnkr.co/edit/myrBq9tv4iNRNd6v6bhT?p=preview

<p-panel>
  <p-header>
    <div>Registration Form
      <button type="button" pButton icon="fa-plus" style="float:right" label="Add"></button>
      <button type="button" class="ui-button-danger" pButton icon="fa-minus" style="float:right" label="Delete"></button>
    </div>
  </p-header>
</p-panel>

【讨论】：

我更正了。但仍然没有显示图标和标签。

【解决方案5】：

从 pi-close 更改为 fa-close 对我有用。

似乎有新旧字体很棒的图标。它们必须像这样使用：

class="pi pi-xxx" or class="fa fa-xxx"

【讨论】：

【解决方案6】：

你不能同时使用图标和标签。试试下面 <button type="button" pButton icon="fa-plus" style="float:right"></button> 从primeng/button导入ButtonModule是必须的

【讨论】：