size p:commanButton with fa-2x

Question

My problem is the next:

I have a p:commanButton like this:

<p:commandButton icon="fa fa-reply fa-2x"/>

The problem is that the content (fa-reply) grows but the size of the button doesn't.

Which is the problem?

When I do: <p:commandButton icon="fa fa-reply" styleClass="fa-2x"/> the size of the button grows, but the content doesn't show correctly.

Are you using text with icon? – Parkash Kumar Sep 26 '17 at 14:32 — Parkash Kumar, Sep 26 '17 at 14:32
The button doesn't has text, but it has tittle. – agu Sep 27 '17 at 06:17 — agu, Sep 27 '17 at 06:17

score 0 · Accepted Answer · answered Sep 26 '17 at 14:40

I think, simple work-arround would be to use p:commandLink with manual <i class="fa fa-reply fa-2x"></i> tag instead of p:commandButton, as following:

<p:commandLink>
    <i class="fa fa-reply fa-2x"></i>
</p:commandLink>

And if you want to use text as well, then:

<p:commandLink>
    <i class="fa fa-reply fa-2x"> Reply</i>
</p:commandLink>

Otherwise, you will require to add compatencies for the different sizes of the icons (fa-xx) on your p:commandButton using custom CSS classes.

This is a workaround in my book, as you are using a different component instead. — Jasper de Vries, Sep 08 '22 at 09:36

score 0 · Answer 2 · answered Sep 08 '22 at 07:46

You can simply add style="font-size: 2rem" to your button:

<p:commandButton icon="fa fa-reply" style="font-size: 2rem"/>

This will set the font size of both the icon and the button text.

Example from the showcase where I applied this to the button in the middle:

I suggest to create a class though, so you can reuse this style on buttons.

size p:commanButton with fa-2x

2 Answers2