CODEWITHSUNDEEP
cssjsfprimefaces
Shardendu
Shardendu

Reputation: 3590

Override default icon of primefaces

I am new to primefaces, I want to override or change the default icon ui-icon-circle-triangle-e of rowtoggler to ui-icon-plus. Please tell me if it is possible, and if so how to implement it.

Upvotes: 1

Views: 2750

Answers (1)

Kuba
Kuba

Reputation: 2089

You could either drop all Primefaces styles using the following code in your web.xml:

<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>none</param-value>
</context-param>

or if you like the overall styling simply override the class responsible for this particular icon, which is .ui-icon-circle-triangle-e

You can then add a new css selector to a file that comes after theme.css or is more specific. Specificity is the better way to go. Add a styleClass="plus-table" on the <p:dataTable> and a css selector/style like

.plus-table .ui-icon-circle-triangle-e {
    background-position: -16px -128px;
}

the same for minus:

.plus-table .ui-icon-circle-triangle-s {
    background-position: -48px -128px;
}

should work. You can always add the .plus-table to a template element so it applies everywhere and you don't need to add it to each component

See also:

Upvotes: 1

Related Questions