2

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. 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.

D. Bermudez
  • 217
  • 2
  • 9
  • 20

1 Answers1

5

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.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • Small correction. It is , not . – K. Siva Prasad Reddy Aug 15 '13 at 14:18
  • @Srinivas: only if you're using legacy JSF 1.x or don't make use of JSF 2.x resource management for some unclear reason. See also http://stackoverflow.com/questions/8367421/how-to-reference-resource-in-facelets-template Since JSF2, it's strongly recommend to make use of JSF resource management as it gives more benefits (caching, versioning, localization, combining, etc). The answer is in this case really correct and you're just doing it wrong. – BalusC Aug 15 '13 at 14:19