Question

Simple question (using JSF 2.0 and primefaces 2.2.1):

I need to create a button or link that will take me to an external url (i.e. http://www.facebook.com) and I need that button to look like the facebook icon instead of having the literal word. How can I do this? Thank you.

Answer 1

You basically want to end up with the following in the JSF-generated HTML code:

<a><img /></a>

There are several ways how to achieve this in JSF.

1. Just do it:

   <a href="http://www.facebook.com">
     <img src="#{request.contextPath}/resources/images/facebook.png" />
   </a>
   

2. Use <h:graphicImage>:

   <a href="http://www.facebook.com">
     <h:graphicImage name="images/facebook.png" />
   </a>
   

3. Eventually, with <h:outputLink>:

   <h:outputLink value="http://www.facebook.com">
     <h:graphicImage name="images/facebook.png" />
   </h:outputLink>
   

What way to choose depends on whether you really need it to be a JSF component. E.g. in order to be able to grab/manupulate it in backing bean, and/or to re-render by ajax, etc.