带有令人敬畏的字体图标的Primefaces v10按钮

Question

如何使用Primefaces version 10按钮与Font Awesome图标，并调整图标大小，但没有文字ui:按钮显示？

A和B是我可以调整大小的测试，但它们不是按钮。C&D是按钮，图标调整了大小，但随后出现了单词ui:button。M&N我已经调整了实际的PF按钮的大小，但无法调整图标的大小。

理想情况下，我只是想让相机图标成为一个可点击的按钮。我对C/D也很满意，但显然没有包含组件名称。如果我能让图标小一点，M&N也不错。

​

​

        (A)<i class="fas fa-camera fa-xs"></i>
        <br />
        (B)<i class="fas fa-camera fa-5x"></i>
        <br /><br />
        (C)<p:button styleClass="fas fa-camera fa-xs"></p:button>
        <br /><br />
        (D)<p:button styleClass="fas fa-camera fa-5x"></p:button>
        <br /><br />
        (E)<p:button icon="fas fa-camera fa-xs"></p:button>
        <br /><br />
        (F)<p:button icon="fas fa-camera fa-5x"></p:button>
        <br /><br />
        (G)<p:button icon="fas fa-camera" styleClass="fa-xs"></p:button>
        <br /><br />
        (H)<p:button icon="fas fa-camera" styleClass="fa-5x"></p:button>
        <br /><br />
        (I)<p:button icon="fas fa-camera fa-xs" styleClass="fa-xs"></p:button>
        <br /><br />
        (J)<p:button icon="fas fa-camera fa-5x" styleClass="fa-5x"></p:button>
        <br /><br />
        (K)<p:button icon="fas fa-camera fa-xs" styleClass="fa-xs" style="font-size: 8px"></p:button>
        <br /><br />
        (L)<p:button icon="fas fa-camera fa-5x" styleClass="fa-5x"  style="font-size: 28px"></p:button>
        <br /><br />
        (M)<p:button icon="fas fa-camera fa-xs" styleClass="fa-xs" style="width:25px; height:25px; font-size: 8px"></p:button>
        <br /><br />
        (N)<p:button icon="fas fa-camera fa-5x" styleClass="fa-5x" style="width:25px; height:25px; font-size: 28px"></p:button>
        <br /><br />  

Answer 1

这可以使用自定义样式来完成。请参阅How do I override default PrimeFaces CSS with custom styles?

使用浏览器开发工具找到该图标。应该有一个包含:before的CSS规则。覆盖它并增加字体大小。增加按钮的大小并固定图标的位置。

您可能想要向按钮添加一个styleClass，您可以使用它来覆盖按钮和图标的现有样式。