How to use PrimeIcons with a custom or 'none' theme

1
votes

I migrate a small application from JSF 1.2 RF 3.3.3 to JSF 2.1 and PF 7.0. (Reason for 2.1 is JBoss EAP 6.1 which allows only java 7)

The look should not be changed, so I use no theme (Theme none in web.xml). Most problems can be solved with some CSS, but for the p:dataTable I need sort icons, with theme=none there are none present.

Is there a way to use some default sort icons out of primefaces without adding some icons to the application? And when yes, how do I use it? I tried some stuff with PrimeIcons, but did not get it working.

1
jsfprimefaces

1 Answers

4
votes

The icons are bundled with PrimeFaces, which you can manually load like:

<h:outputStylesheet library="primefaces" name="primeicons/primeicons.css" />

This will allow you to use icons like:

<i class="pi pi-xxx"></i>

But this is not what the PrimeFaces components use. The components are based on jQuery UI icons, so classes like ui-icon ui-icon-xxx. So you need to create a custom style sheet taking care of the UI icons. You don't need to start from scratch, because you can find all of them in (for example) the Nova Light theme.

In the theme linked above, find all the rules containing .ui-icon and especially the ones like:

.ui-icon-xxx:before {
  content: "...";
}

(content defines which glyph from the PrimeIcons font is used) and incorporate then into your style sheet. Unfortunately there is no section you can copy and paste, so it will be a painstaking task.