javascript - 如何在面板标题上只显示超棒的字体图标？

Question

我正在使用 PrimeNG，只是想在面板标题上添加超棒的字体图标，但我的问题是，如果我删除文本 (LABEL)，屏幕中会出现一个随机的 css 类用户界面按钮。谁能指出我正确的方向？

这是我的工作代码:

PLUNKER

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

这是我要完成的示例:

Answer 1

只需删除标签属性。我认为您正在做的是将其设置为空 (label="") 而不是将其删除。

试试这个:

<p-header>
  Registration Form
  <button type="button" pButton icon="fa-plus" style="float:right"></button>
  <button type="button" class="ui-button-danger" pButton icon="fa-minus" style="float:right"></button>
</div>

编辑如果你想要看起来像你的图片的东西，你需要使用 CSS 自定义并且不再需要使用 primeNG 按钮:

HTML:

<div id="header">
  <a (click)="refresh()"><i class="fa fa-refresh fa-border fa-2x"></i></a>
  <a><i class="fa fa-bars fa-border fa-2x"></i></a>
  <a><i class="fa fa-expand fa-border fa-2x"></i></a>
  <a><i class="fa fa-minus fa-border fa-2x"></i></a>
</div>

CSS:

<div id="header">
  <a (click)="refresh()"><i class="fa fa-refresh fa-border fa-2x"></i></a>      
</div>

查看工作 Plunker