<h:Link> tag: How can the value attribute have an Image instead of text?

Question

I have a tag with which i return to the home page.

<h:link  value="Home" outcome="/webpages/NewWelcome.xhtml"/>

I would like to have an png Home icon instead of "Home" text. How can I add an image into the value attribute.

I tried

<h:link  value="#{<img style="border:0;" src="smiley.gif" alt="HTML tutorial" width="42" height="42">}" outcome="/webpages/NewWelcome.xhtml" />

This obviously didn't work. I am not sure how can i.

Any Help would be appreciated. Thank You :)

Answer 1

Add h:graphicImage inside h:link:

<h:link outcome="home" >
    <h:graphicImage value="/images/home.png" style="border: none" />
</h:link>