Page 1 of 1

How do you make icon only buttons larger?

Posted: 05 Jul 2015, 08:45
by 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.

Re: How do you make icon only buttons larger?

Posted: 06 Jul 2015, 12:01
by 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;
}

Re: How do you make icon only buttons larger?

Posted: 08 Jul 2015, 17:32
by RElliott
This works. Thanks!

Re: How do you make icon only buttons larger?

Posted: 10 Jul 2015, 01:02
by mert.sincan
Glad to hear, thanks!