jsf commandButton using tags in value

Question

Not sure if possible, but I'm using bootstrap for most of my school project. One design attribute I usually use in my admin panels are the use of icons (edit = pencil, remove = cross, add = plus, ...).

So to render those simple buttons i use the following code:

<a href="#" class="btn"><i class="icon-pencil"></i></a>

In use with JSF I tried using:

<h:commandButton value="<i class='icon-delete icon-white'></i>" class="btn-danger" action="#{horseController.delete(item.id)}" />

But it seems the '<' is not permitted as stated in this error message:

Error Parsing /admin/horses.xhtml: Error Traced[line: 27] The value of attribute "value" associated with an element type "null" must not contain the '<' character.

So my question is: How is it possible to be using tags, in this case for the use of icons, in a commandButton?

Answer 1

The <h:commandButton> is the wrong tag for the purpose. It generates a HTML <input type="submit"> element while you need a HTML <a> element. You need a <h:commandLink> instead.

<h:commandLink class="btn-danger" action="#{horseController.delete(item.id)}">
    <i class="icon-delete icon-white" />
</h:commandLink>