Search code examples
cssjsfbootsfaces

How can I display a <b:iconAwesome> instead of a <b:commandButton>?

I'd like to know, if there is any way to replace the default button of <b:commandButton> with a <b:iconAwesome>.

However, it does work with a <h:commandLink>, perfectly.

<h:commandLink>
    <b:iconAwesome name="arrow-down"></b:iconAwesome>
</h:commandLink>

And with replacing, I mean fully replaced and not, that the icon is on the button. Just check the working code above.

Are there other hints to be mentioned?

(Note: <b:...> is a component of BootsFaces.)

Solution

  • Two answers:

    • To show an icon within a commandButton, just add the iconAwesome attribute:

      <b:commandButton value="" ajax="true" update="form:inform infoshow" 
                 iconAwesome="thumbs-up" look="info" />

    Example of a BootsFaces image commandButton

    • If you want to display the image instead of the button, while keeping the button functionality, add a couple of inline styles (also see here):

      <b:commandButton value="" ajax="true" update="form:inform infoshow" 
              iconAwesome="thumbs-up" look="info" 
              style="padding: 0; border: none; background: none;color: #000" />

    • If you need more flexibility: we're already working on it. BootsFaces 0.8 is going to allow you to nest arbitrary HTML within the <b:commandButton />, exactly the way you did in your <b:commandLink /> example. You can watch the progress on our bug tracker: https://github.com/TheCoder4eu/BootsFaces-OSP/issues/65