web-dev-qa-db-ja.com

PrimeNGボタンは、angular2でfaアイコンとラベルを表示しません

パネルヘッダーに[追加]および[削除]ボタンを表示したい。以下のコードは、fa-iconとlabelのないボタンを表示します

<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>
angularprimeng
8
Jan69

BrowserAnimationsModuleをインポートすると、プライミングボタンがパネル内に表示されます。

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

コードは正常に動作しています こちら 。

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

angular2/4を使用している場合は、app.module.tsに次のインポートを追加する必要があります

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

サンプルコードに構造エラーがあります。私はあなたのために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>
0
BillF

Pi-closeからfa-closeに変更することでうまくいきました。

新しいフォントと古いフォントの素晴らしいアイコンがあるようです。次のように使用する必要があります。

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