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

Tags: jquery,css,jsf-2,primefaces,font-awesome

Problem :

I'm using PrimeFaces to generate a datatable. The default sorting icons are chevrons from the JQuery library but as they are not Vector they look ugly. I wan't to replace them using some font like font awesome but I have no clue how to do this. The below CSS handles I can use to change the image to different sprites etc.

If I could somehow change the class primefaces adds from ui-icon-triangle-1-n to af fa-sort-alpha-desc for example I would already be helped.

.ui-state-default .ui-icon{
        background-image: url("../Assets/images/jquery-ui/ui-    icons_0072b6_256x240.png");
    .ui-datatable .ui-icon-carat-2-n-s {
    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;

Solution :

here is an example:

    content: "\f049";
    font-family: FontAwesome;
    color: white;

you can find the codes you cann add for content instead of "\f049" in the font-awesome website

the :before is important behind the css class

    CSS Howto..

    How do I make an image only overflow (hidden) on the bottom if it exceeds it's container div?

    How to remove default chrome style for select Input?

    How should I divide up CSS files to support multiple devices?

    How to prevent fixed positioned element overlapping others elements in css?

    How do I stop and change a CSS keyframe in Javascript?

    css: how to inherit whole class

    How To Avoid Certain CSS coding/commands From Overriding Existing Customisations

    how to change browsers default scrollbar using css or jquery

    How to switch “controlgroup” background color

    How can design a full screen calendar view in Twitter Bootstrap?

    How would I call :parent for this tooltip?

    How to style 2 vertical jQuery UI Slider handles?

    How to implement easeOutBack easing in css transform animation

    How to apply Css class to a row using datatables.js?

    how to change the CSS linear-gradien backgroundt height (thickness)?

    How to hide element using Class; instead of using css function in JQuery? [closed]

    How to start css and html

    How to Draw Kundli Design (diamonds and triangles in square) using HTML and CSS?

    How does the arrival of HTML5 and CSS3 affect jQuery?

    How to style placeholder text color for individual text field?

    How defile CSS rule path for iframe in cascade style sheet (CSS)?

    How to import a css file in a react component?

    How do I create two columns using CSS?

    How to link Body/Html Backgrounds with CSS in Ipad/Iphone (safari)

    Jquery: How to make the content showup below the navigation bar when the anchor link is clicked?

    How to toggle css visibility with Javascript

    In the ordered sequence of words: “Word1, Word2, Word3”: how to have 1 and only 1 hyperlink on “Word1” & “Word3”? Thus, skip a word in a single link?

    How to force a div to honor its constraints and put things into overflow instead of resizing a column?

    How to modify this JQuery CSS into my view?

    How to write different HTML for different screen sizes