How do you make icon only buttons larger?

[RElliott]

I placed several buttons on my page similar to the following:

Code: Select all

<p:button
    class="ripplelink WhiteBlue Fright"
    icon="fa fa-home WhiteBlue Fs23"
    title="Welcome"
    outcome="/welcome.xhtml" />

I was expecting the "Fs23" class to make the icon bigger but the icon is stuck at 16px. I tracked the CSS down to the following section of the theme.css.xhtml.

Code: Select all

.ui-button-icon-only .ui-icon {
  font-size: 16px !important;
}

What is the recommended way to get around this restriction?

I noticed that the Rio top-menu uses anchors instead of p:button to accomplish bigger round buttons.

[mert.sincan]

I think you can override the icon size. Please try with;

Code: Select all

.ui-button-icon-only .ui-icon.Fs23 {
     font-size: 23px !important;
     margin-left: -10px;
}

.ui-button-icon-only .ui-icon.fa.Fs23 {
     margin-top: -12px !important;
}

[RElliott]

This works. Thanks!

[mert.sincan]

Glad to hear, thanks!