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

时间:2017-07-27 17:53:57

标签: angular primeng

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

B

6 个答案:

答案 0 :(得分:12)

您的代码工作正常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,
    ...
  ],
  ...
})

答案 1 :(得分:3)

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

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

答案 2 :(得分:2)

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

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

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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

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

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

答案 5 :(得分:0)

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