Primefaces Change icons from p:rowEditor

Question

i want to change the icons from the <p:rowEditor>. Not the ui-icon-pencil, but the ui-icon-check and ui-icon-close.

My CSS

.ui-icon-check {
    background-image: url(../images/success_icon_16x16.png) !important; 
}
.ui-icon-close {
    background-image: url(../images/cancel.png) !important;
}

But when i edit some row, i see no icon's.

Any idea? Thx Tim

maple_shaft · Answer 1 · 2013-01-18T13:55:06.157

1

This is likely because your CSS classes are not overriding the jQuery UI css stylesheet. This is because your stylesheet is being placed in the <head> tag before the jQuery UI stylesheet is being declared.

Essentially, jQuery UI stylesheet is overriding your stylesheet.

The easiest way to ensure that your stylesheet overrides other declared styles is to place your stylesheet in the <h:body> instead. Unless there is some attribute on <h:outputStylesheet> that allows you to order how it is rendered in the document compared to other ` objects that is in a newer release of JSF, then this is the only way that I can think of.

edited Jan 18 '13 at 13:55

answered Jan 18 '13 at 13:36

maple_shaft

10,435
6
46
74

1

Note that it should essentially be placed in JSF ``, not HTML ``. JSF will relocate it to the end of generated HTML `` during render response. See also among others http://stackoverflow.com/a/8774997/157882 – BalusC Jan 18 '13 at 13:40
I use `` and it is the same result in head or in body. I can change the `ui-icon-pencil` or `ui-icon-calendar`, but not the `ui-icon-check` and `ui-icon-close`. It is not a general problem, is a problem with this icon's - I think. Thx Tim – Tim Jan 18 '13 at 13:53
1

@BalusC By default yes. Frameworks like PrimeFaces though provide their own HeadRenderer that could encode the link tags wherever they want, but it is a good point. – maple_shaft Jan 18 '13 at 18:32
1

@BalusC BTW, I recently introduced OmniFaces into my application and I am *extremely* happy with it! You solved a lot of shortcomings with the framework. Excellent job :) – maple_shaft Jan 18 '13 at 18:33

score 0 · Answer 2 · answered Nov 09 '14 at 13:31

I had a similar issue, I could override everything except icons of pencil, check and close. the issue with me was the height and width. So I had to override that.

 .ui-icon-pencil {
  background-image: url(../images/pencil.png) !important;
  height: 20px;
  width:20px;
 }

Primefaces Change icons from p:rowEditor

2 Answers2