我可以为 Primeng 按钮添加图标吗？

Question

我一直在尝试将来自http://seehowsupport.com/font-awesome/网站的图标添加到我的p-button中。

<div class="ui-g-12">
    <button pButton id="selectFile" (click)="selectFile()" label="+ Select File..."></button>
</div>

在这里，我希望用上面的URL中的图标代替标签中的'+'。我听说可以通过更改CSS中的某些内容属性为\f067来实现，但我不确定该如何操作。

- Sunil Bishnoi

---

<button><i class="fas fa-plus"></i></button> - mplungjan

Answer 1

按钮上的图标是通过icon属性指定的，位置可以使用iconPos属性进行自定义。默认图标位置为左侧。如果只显示图标，请将标签设置为未定义。

以下是两种在primeng按钮中添加图标的方法。

<button pButton type="button" icon="pi pi-check" iconPos="left"></button>
<p-button label="Click" icon="fa fa-check" iconPos="left"></p-button>

工作示例

了解更多文档内容，请访问以下链接：

• https://primefaces.org/primeng/#/button

- Pardeep Jain

---

@Pradeep，我们可以指定图标的颜色吗？ - Bhargava

如果有人想要应用自己的图像（.png，.svg……），可以使用:before和content: url()属性来实现：例如.className:before{ content: url('icons/padlock.png');}。这样的CSS类可以传递给p-button。 - Borneo777

Answer 2

按照他们的文档中所示使用这种方式，它可以正常工作。

<div class="ui-g-12">
    <button pButton id="selectFile" (click)="selectFile()" label="Select File..."><i class="fas fa-500px"></i>Text</button>
</div>

如何使用Font Awesome的链接https://fontawesome.com/how-to-use/svg-with-js

- Ajay.k

---

抱歉，它没有起作用。@Pradeep的解决方案有效。:) 谢谢 - Sunil Bishnoi