PrimeFaces: how can I make use of customized icons?


Tags: css,jsf-2,primefaces,icons,styling

Problem :

PrimeFaces provides a lot of icons from jQuery themeroller. They're useful but I need to have some customized icons for my app. Suppose I have a <p:commandButton>:

<p:commandButton icon="ui-icon ui-icon-check" />

Since my CSS knowledge is very limited, I'd be very grateful if you could show me how I can put some customized icon into the label of the above button.

Best regards,



Solution :

You need to define your own css class:

.img-button-help { background-image: url('../images/help.png') !important; }

and then use this class in your p:commandButton:

<p:commandButton icon="img-button-help" />

    CSS Howto..

    How to disable CSS minifier in Liferay?

    How to expand toggle sidebar more

    How to align a paragraph to center of cell in table

    How can I include conversion from LESS to CSS in my ANT build file without including an extra Rhino .jar?

    How slow are CSS media-queries?

    How to move this circle using javascript?

    How to create a proper class structure?

    How to apply CSS styles to links that appear in table headers?

    How to better write complex styles to an element via javascript?

    How to read this hover syntax in css?

    how do angularJS user handle - using bootstrap css/fonts but exclude the jquery controls - scenario

    How can I get a CSS table DIV to be constrained inside another DIV?

    How to get width of an image after setting the height

    How do I get JavaScript to clear the previous onclick element when a user moves on to the next click?

    How to make a different background for each link from a navbar? [closed]

    How do I make a textarea resize properly when I resize browser window?

    How to Prevent Browsers from Caching CSS Files?

    How to prevent default Css scroll onclick and allow javascript event only?

    How to animate my element in my case?

    how to Put a img and text middle of a div

    How to vertically align two
    tags perfectly for each resolution?

    Show a box with text when hovering an image

    How to Minify CSS to its Absolute Minimalistic Essence?

    CSS Question: How to prevent background from being affected by padding?

    How to remove a element after animation?

    Css: how to combine table and column specification into a single selector?

    CSS how to target 2 attributes?

    How to change active menu item style in html/css/js/php

    how to Resize Quick TIme Player to the size of an HTML/CSS DIV

    How to place div on top of responsive rotated div?