How do you make icon only buttons larger?

Locked
RElliott
Posts: 94
Joined: 07 Feb 2014, 00:39

05 Jul 2015, 08:45

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.
PrimeFaces 7.0.1, Glassfish 5.1.0, Oracle JDK 8, Eclipse 2016-02

mert.sincan
Posts: 4352
Joined: 29 Jun 2013, 12:38

06 Jul 2015, 12:01

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
Posts: 94
Joined: 07 Feb 2014, 00:39

08 Jul 2015, 17:32

This works. Thanks!
PrimeFaces 7.0.1, Glassfish 5.1.0, Oracle JDK 8, Eclipse 2016-02

mert.sincan
Posts: 4352
Joined: 29 Jun 2013, 12:38

10 Jul 2015, 01:02

Glad to hear, thanks!

Locked

Return to “Rio”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest