Using fileDownload with an image

Question

I am using this code:

<p:commandLink id="downloadLink" value="Download" ajax="false">                          
<p:fileDownload value="#{supplierFileController.fileroute()}" />                      
</p:commandLink>

Works great. The only thing is that I shows a normal link. I want to use it with an image instead. Something like this:

<h:commandLink action="#{supplierFileController.destroy}">
<h:graphicImage title="Delete"   value="/image/image.png"/>                                               
</h:commandLink> 

I have tried some combinations, but I havent been able to make it work.

Thanks in advance. Regards, Daniel

Answer 1

You can use something like this

<p:commandLink id="downloadLink" value="Download" ajax="false" styleClass="ui-icon ui-icon-trash">      

Here a list of all available jquery Icons

jQueryUI Icons Cheatsheet N#1 (click on Toggle text to get all the names of the icons)

jQueryUI Icons Cheatsheet N#2

Second option would be

<p:commandLink 
   styleClass="myDeleteBtnClass"
   id="downloadLink" value="Download" ajax="false"
</p:commandLink>

try this class

.myDeleteBtnClass{ background-image: url('../resources/image/someImage.png'); }

Third Option would be

<h:commandLink action="#{supplierFileController.destroy}">
    <h:graphicImage name="images/image.png" />
</h:commandLink>

note that images folder should be located under the WebContent\resources (take a look a this Resources (Library) In JSF 2.0)