PrimeNG 按钮不在 angular2 中显示 fa 图标和标签

Question

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

的按钮

<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>

Answer 1

您的示例代码中存在一些结构错误。我已经为你创建了一个 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>

Answer 2

您的代码运行良好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,
    ...
  ],
  ...
})

Answer 3

导入 BrowserAnimationsModule 后，primeng 按钮显示在面板内。

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

Answer 4

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

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

Answer 5

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

好像有新旧字体真棒图标。它们必须像这样使用：

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

Answer 6

您不能在下方同时使用图标和标签 time.Try <button type="button" pButton icon="fa-plus" style="float:right"></button> 从 primeng/button 导入 ButtonModule 是必须的

PrimeNG 按钮不在 angular2 中显示 fa 图标和标签

PrimeNG button not displaying fa icon and label in angular2

angular

primeng