1

How to use Primefaces version 10 button with Font Awesome icon and have the icon resized but not have the words ui:button show?

A & B are tests that I am able to resize, but they are not buttons. C & D are buttons and the icon is resized but then the word ui:button appears. M & N I've resized the actual PF button but can't resize the icon.

Ideally I was looking to just make the camera icon a clickable button. I'd also be happy with C/D but obviously with out the component name included. M & N is good too if I could get the icon a little smaller.

enter image description here

        (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 />
jeff
  • 3,618
  • 9
  • 48
  • 101

1 Answers1

0

This can be done using custom styling. See How do I override default PrimeFaces CSS with custom styles?

Find the icon with your browser developer tools. There should be a CSS rule with :before in it. Override it and increase the font size. Increase the size of the button and fix the positioning of the icon.

You probably want to add a styleClass to your button which you can use to override the existing styles for the button and icon.

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102