如何在面板标题上仅显示字体真棒图标？答案

【问题标题】：How to show only font-awesome icons on panel header?如何在面板标题上仅显示字体真棒图标？
【发布时间】：2018-06-26 16:41:16
【问题描述】：

我正在使用 PrimeNG，只是尝试在面板标题上添加字体很棒的图标，但我的问题是，如果我删除文本 (LABEL)，屏幕上会显示一个随机的 css 类ui-btn。谁能指出我正确的方向？。

这是我的工作代码：

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>

这是我想要完成的一个示例：

【问题讨论】：

您在代码中显示的 HTML 似乎没有反映在您链接到的 Plunker 中：i.stack.imgur.com/boVME.png
@DavidThomas 是的，你是对的。但是如果你去掉文本（删除或添加），你会看到一个随机的类名，这是我的问题，因为我只想显示图标而不是文本

标签： javascript css angular typescript primeng

【解决方案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

【讨论】：

如何使按钮看起来像我图片中的按钮？白色背景和蓝色边框？
如果你想要看起来像你的图片的东西，你需要用 CSS 自定义，不再需要使用 primeNG 按钮（见我的编辑）
@非常感谢您的输入兄弟！
我的荣幸！ :)

【解决方案2】：

对我来说，问题是与按钮标签关联的属性“iconpos”。这显示了 ui-btn 标签：

<button type="button" pButton iconPos="left" icon="fa fa-plus-circle" (click)="addCustomer()" style="float:left;margin: 5px;"></button>

这对我的应用有效：

<button type="button" pButton icon="fa fa-plus-circle" (click)="addCustomer()" style="float:left;margin: 5px;"></button>

【讨论】：