CODEWITHSUNDEEP
javascriptangularprimeng
jayjay93
jayjay93

Reputation: 683

FontAwesome Icon not showing for button

<ng-template pTemplate="summary" let-rowData>
<div style="text-align:left">
  <i class="fa fa-pencil" title="Edit"></i>
  <button type="button" pButton icon="fa fa-pencil" (click)="showDialogToAdd()" label="Add"></button>
</div>

The pencil icon will show but the button will not. However, the button will not.

example

This is ripped from the primeng example

https://github.com/primefaces/primeng/blob/master/src/app/showcase/components/table/tablepagedemo.html

(I added the pencil icon just for proof it's not an issue with the css I am attempting to include)

Why is this happening?

Upvotes: 0

Views: 4526

Answers (1)

Guillaume Georges
Guillaume Georges

Reputation: 4020

Define the font-awesome icon in a class attribute on your button, instead of a icon attribute. 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div style="text-align:left">
  <i class="fa fa-pencil-alt" title="Edit"></i>
  <button type="button" pButton class="fa fa-pencil-alt" ></button>
</div>

Upvotes: 1

Related Questions