h:commandButton with twitter bootstrap or other icon

Question

I am using twitter bootstrap css to style. To make icon buttons in it, the standard way is to use "i" tags. <button type="submit"><i class="icon-search"></i></button>.

But I cant enter it within <h:commandButton id="myid"><i class="icon-search"></i></h:commandButton> How can I add HTML within the rendered <h:commandButton> ?

Answer 1

You can add <i class="icon-search"></i> inside h:commandLink

Command link could be styled as button

<h:commandLink id="btnsearch"
    action="search.xhtml"
    styleClass="btn btn-default">
    <i class="icon-search"></i> Search
</h:commandLink>

Answer 2

I just used a hack for now. It's like this (I hid the h:commandButton and added a new submit button).

<h:form id="myFrm" >
   <h:inputText id="search" value="#{user.name}"></h:inputText>
   <h:commandButton id="btnsearch" action="search.xhtml" style="display: none"></h:commandButton>
   <button  type="submit" id="myFrm:btnsearch" name="myFrm:btnsearch"><i class="icon-search"></i></button>
</h:form>