Question

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

Answer 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,
    ...
  ],
  ...
})

Answer 2

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

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

Answer 3

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

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

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

Answer 5

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

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

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

Answer 6

您不能同时使用图标和标签。请尝试以下方法 <button type="button" pButton icon="fa-plus" style="float:right"></button> 并必须从primeng / button导入ButtonModule

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

6 个答案: