web-dev-qa-db-fra.com

Le bouton PrimeNG n'affichant pas l'icône et l'étiquette de fa dans angular2

Je souhaite afficher les boutons Ajouter et Supprimer dans l'en-tête du panneau. Le code ci-dessous affiche un bouton sans icône de fa et sans étiquette

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

Après avoir importé le BrowserAnimationsModule, les boutons primitifs s’affichent à l’intérieur du panneau.

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

Votre code fonctionne bien ici .

Avez-vous importé font-awesome dans votre application? Sinon, ajoutez ceci dans votre index.html dans la balise <head></head>.

<head> 
...
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 </head>

De plus, vous devrez importer ButtonModule, PanelModule dans votre application.

import {ButtonModule, PanelModule} from 'primeng';

@NgModule({

  imports: [
    ...
    ButtonModule,
    PanelModule,
    ...
  ],
  ...
})
9
Nehal

si vous travaillez avec angular2/4, vous devez ajouter l’importation suivante à votre app.module.ts.

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

Vous avez des erreurs de structure dans votre exemple de code. J'ai créé un plnkr pour vous.

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

Changer de pi-proche en fa-proche a fonctionné pour moi.

On dirait qu'il y a de nouvelles et d'anciennes icônes géniales de polices. Ils doivent être utilisés comme ceci:

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