FontAwesome图标未显示按钮

Question

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

铅笔图标将显示，但按钮将不显示。但是，该按钮不会。

这是从primeng示例中摘录的

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

（我添加铅笔图标只是为了证明它不是我尝试包含的css的问题）

为什么会这样？

Answer 1

在按钮的class属性（而不是icon属性）中定义超棒的字体图标。

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