Need help to display an icon image in a command button

Question

Just a basic need but cannot get it to work. I would like to have a primefaces button to display my image, without any text.

But what i get is a button that contains only a ^ character and does NOT displaying the image, which only has a size of 16x16.

So, this is the primefaces button :

<p:commandButton image="ui-icon-csv" title="CSV Document" ajax="false">
    <p:dataExporter type="csv" target="gridRPBDetails" 
        fileName="#{tInputBean.exportFilename}" />
</p:commandButton>

This is the css file :

.ui-icon-csv {
    background-image: url(images/csv_small.png);
}

And this is the generated html for the button :

<button type="submit" onclick=";" 
    name="gridRPBDetails:j_idt82" id="gridRPBDetails:j_idt82" 
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" 
    role="button" aria-disabled="false">
        <span class="ui-button-icon-primary ui-icon ui-icon-csv"></span><span class="ui-button-text">CSV Document</span>
</button>

And to prove the image accessible, i try this URL, and indeed it shows the picture :

http://albert:8080/mywebapp/faces/javax.faces.resource/images/csv_small.png

Im using tomcat 7, and these are my dependencies :

<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>2.2.1</version>
</dependency>
<dependency>
    <groupId>com.sun.faces</groupId>
    <artifactId>jsf-api</artifactId>
    <version>2.0.4-b09</version>
    <scope>compile</scope>
</dependency>
<dependency>
    <groupId>com.sun.faces</groupId>
    <artifactId>jsf-impl</artifactId>
    <version>2.0.4-b09</version>
    <scope>compile</scope>
</dependency>

Any ideas what went wrong ?

Thank you !

Are you sure that your css finds the image (correct relative path)? Try to check it with Chrome/Firefox developer tools for any 404 errors if you request the page containing the button. — Matt Handy, May 11 '11 at 06:29
@Matt Handy: Hello, thanks for you response. Yes, as stated in the original post, i can view the image using that URL. And also i forgot to mention that i managed to view the image also using firebug. But i have found a solution after some tweaking around the css. Please see the answer below if you're interested. Thank you ! — Bertie, May 12 '11 at 10:25

score 7 · Accepted Answer · answered May 12 '11 at 10:31

After some investigation using firebug, i found out that the culprit is from the CSS stuff i defined.

So these are the changes i made to make this work.

The JSF button :

<p:commandButton image="ui-icon-xls" title="Excel Document" ajax="false">
    <p:dataExporter type="xls" target="gridRPBDetails" 
        fileName="#{tInputBean.exportFilename}" />
</p:commandButton>

The CSS :

.ui-state-default .ui-icon-xls {
    background-image: url(images/excel_small.png);
}

And here is the generated html :

<button type="submit" title="Excel Document" onclick=";" 
  name="gridRPBDetails:j_idt81" id="gridRPBDetails:j_idt81" 
  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" 
  role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon ui-icon-xls"></span>
    <span class="ui-button-text">ui-button</span>
</button>

Thank you !

falsarella · Answer 2 · 2015-04-22T18:50:58.777

2

Primefaces provide the graphicImage as shown in their showcase-labs (broken link):

<p:commandLink ajax="false">  
    <p:graphicImage value="/images/excel.png" />  
    <p:dataExporter type="xls" target="tbl" fileName="cars" />  
</p:commandLink>

It can be useful in someway to someone.

_{* For PrimeFaces 5.2, follow to this showcase-labs link.
Note that, in that case, the above code wouldn't work.}

edited Apr 22 '15 at 18:50

answered Feb 24 '12 at 16:33

falsarella

12,217
9
69
115

@Zbyszek What about this answer ? – Andy Jul 12 '13 at 18:01

score 2 · Answer 3 · answered Mar 12 '12 at 12:24

2

write ui-widget before the icon class name

.ui-widget .ui-icon-xls {
    background-image: url(images/excel_small.png);
}

the .ui-state-default will not make it visible in other components like <p:menuitem/> and <p:menuButton/>

answered Mar 12 '12 at 12:24

Talaat Safwat

161
1
4

I dont play with this project anymore, and couldnt test it. But i think this is the safest answer. Thank you for sharing. – Bertie Mar 12 '12 at 14:49
Great solution! But Primefaces' classes changes a lot, that's why it may not work for some and might break on version updates... To whom it may help: inspect your generated html and/or see the corresponding primefaces styling documentation of the version you're using, then you can make it work with css! – falsarella Apr 22 '15 at 18:50

score 1 · Answer 4 · edited Apr 22 '15 at 18:47

1

When commandButton is used, is important that the png file size be 16 x 16, because a bigger image might no be displayed correctly, or not displayed at all.

edited Apr 22 '15 at 18:47

falsarella

12,217
9
69
115

answered May 05 '13 at 05:07

user2351270

11
1

Need help to display an icon image in a command button

4 Answers4

Linked