Custom icon in PrimeFaces button doesn't work

Question

I'm trying to put an image/icon inside a button in Primefaces, problem is the image doesn't show. I'd used FireBug and look like the path is correct. Is there any problem or restrictions using Custom icons?

XHTML code:

<p:button type="button" value="Limpiar" icon="img-button-prismaticos" onclick="limpiar  ();return false;"  />

CSS Code:

.ui-state-default .img-button-prismaticos {
    background-image: url('/dinarep/faces/javax.faces.resource/prismaticos-icono-9281-48.png?ln=images') !important;
}

Miguel A. Cardenete · Accepted Answer · 2013-11-27 09:57:06Z

1

I fix the problem. It's related with the size of the span where imagen are located on the button. Is only 16x16!. I fix channging the size and margins of the span in CSS. I use important! to hack the CSS because i don't want to overwrite the default Primefaces Styles. And I want my margins has more priority.

.img-button-nube {
    background-image: url('/dinarep/faces/javax.faces.resource/nubes-icono.png?ln=images') !important;
    height: 28px;
    width: 28px;
    left: 0 !important;
    margin-left: 0 !important;
    top: 0 !important;
    margin-top: 0 !important;
}

and in the XHTML (no changes):

<p:button type="button" icon="img-button-nube" onclick="nubes();return false;"  />

It's work for me...

Thanks

answered Nov 27, 2013 at 9:57

Miguel A. Cardenete

1221 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vijayakumar gopalakrishnan · Accepted Answer · 2013-11-26 19:33:29Z

0

try this without .ui-state-default

.img-button-prismaticos { background-image: url('/dinarep/faces/javax.faces.resource/prismaticos-icono-9281-48.png?ln=images') !important; }

best vj

answered Nov 26, 2013 at 19:33

vijayakumar gopalakrishnan

883 silver badges10 bronze badges

1 Comment

Miguel A. Cardenete Over a year ago

I try with .ui-state-default and without this and don`t work...I fix the problem...I'll answer my cuestion with the solution

Collectives™ on Stack Overflow

Custom icon in PrimeFaces button doesn't work

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related