PrimeNG按钮在Angular2中无法显示fa图标和标签

Question

PrimeNG按钮在Angular2中无法显示fa图标和标签

9

我希望在面板标题栏中显示添加和删除按钮。以下代码显示没有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>

- Jan69

可能是Primeng按钮不显示标签的重复问题。 - Hendrik Brummermann

你正在使用什么网络服务器？ - BillF

6个回答

4

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

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

- Jan69

2

如果你正在使用Angular2/4，你需要在app.module.ts中添加以下导入：

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

- Firman Drage

1

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

0

将 pi-close 改为 fa-close 对我有用。

似乎有新旧 font awesome 图标。它们必须这样使用：

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

- makkasi

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>

- BillF

我已经进行了修正，但是图标和标签仍未显示。 - Jan69

0

您不能同时使用图标和标签。请尝试以下代码：

<button type="button" pButton icon="fa-plus" style="float:right"></button>

另外，从 primeng/button 导入 ButtonModule 是必须的。

- Meghana

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nehal · Accepted Answer

你的代码运行良好，在这里。

你是否已经在应用程序中导入了font-awesome？如果没有，请在<head></head>标记中添加以下内容到你的index.html文件中。

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