html - Need help to display an icon image in a command button -

just basic need cannot work. have primefaces button display image, without text.

but button contains ^ character , not displaying image, has size of 16x16.

---

so, 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 css file :

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

---

and generated html 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 prove image accessible, try url, , indeed shows picture :

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

---

im using tomcat 7, , these 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 went wrong ?

thank !

after investigation using firebug, found out culprit css stuff defined.

so these changes made make 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 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 !