How can I use the awesome font (or other font icons) instead of jQuery sprites in Primefaces DataTable?

Question

I am using PrimeFaces to create a datatable. The default sorting icons are chevrons from the JQuery library, but since they are not Vector, they look ugly. I did not replace them using some kind of font that looks like a font, but I don't know how to do it. Below I can use CSS handles to change the image to different sprites, etc.

If I could somehow change the cluster classes added from ui-icon-triangle-1-n to af fa-sort-alpha-desc , for example, I would already help.

.ui-state-default .ui-icon{ background-image: url("../Assets/images/jquery-ui/ui- icons_0072b6_256x240.png"); } .ui-datatable .ui-icon-carat-2-ns { background-position: -160px 0 !important; } .ui-datatable .ui-icon-triangle-1-n{ background-position: 0 -48px !important; } .ui-datatable .ui-icon-triangle-1-s{ background-position: -64px -48px !important; } 

Answer 1

I ended this CSS bit for a DataTable :

 .ui-datatable .ui-sortable-column-icon.ui-icon { background-image: none; text-indent: 0; margin: 0 0 0 .5em; } .ui-paginator > span:before, .ui-sortable-column-icon:before { font-family: FontAwesome; color: #fff; } .ui-paginator > span > span, .ui-paginator a span { display: none; } .ui-paginator-first:before { content: '\f049'; } .ui-paginator-prev:before { content: '\f048'; } .ui-paginator-next:before { content: '\f051'; } .ui-paginator-last:before { content: '\f050'; } .ui-icon-carat-2-ns:before { content: '\f0dc'; } .ui-icon-carat-2-ns.ui-icon-triangle-1-n:before { content: '\f0de'; } .ui-icon-carat-2-ns.ui-icon-triangle-1-s:before { content: '\f0dd'; } .ui-paginator .ui-state-disabled { opacity: .25; } 

All Unicode can be found here: http://fontawesome.io/cheatsheet/

The Awesome font offers several alternative icons:

•  fa-sort-alpha-asc \f15d
•  fa-sort-alpha-desc \f15e
•  fa-sort-amount-asc \f160
•  fa-sort-amount-desc \f161
•  fa-sort-numeric-asc \f162
•  fa-sort-numeric-desc \f163

Update

After doing CSS overrides for my theme and taking into account Kukeltje's comments, I decided it would be nice to add the JSF ResourceHandler to the theme I'm working on .

Just add a dependency to your project and add a resource handler

 <application> <resource-handler>org.jepsar.primefaces.theme.jepsar.FontAwesomeResourceHandler</resource-handler> </application> 

The handler will detect PrimeFaces themes and fix CSS. It removes the jQuery user interface icons and adds the Awesome rules Font (which includes a separate SCSS Icon Display ).

Answer 2

here is an example:

 .ui-paginator-first.ui-state-default.ui-corner-all:before{ content: "\f049"; font-family: FontAwesome; color: white; } 

you can find codes that you can’t add for content, and not "\f049" to the font-awesome website http://fortawesome.imtqy.com/Font-Awesome/icon/pencil/

the: before is important behind the css class