1

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.

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
Ande Hofer
  • 150
  • 2
  • 14

1 Answers1

4

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.

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
  • Thank you, I copied everyhing with ui-sortable-column-icon from the css file you referenced and now it is working. It seems the problem was my not-understandig of the content attribute. – Ande Hofer Jul 14 '20 at 12:15
  • 1
    @JasperDeVries: Would not be possible to quickly extract all icon related info from the css with a grep? Think it would... I'll try tomorrow (if I don't forget) and add it to your answer if I succeed – Kukeltje Jul 14 '20 at 13:05