1

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

alexander
  • 1,191
  • 2
  • 20
  • 40

1 Answers1

1

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

Community
  • 1
  • 1
Stephan Rauh
  • 3,069
  • 2
  • 18
  • 37
  • Well, I need to display the icon INSTEAD of the button, not on it. So just the icon with button functionality (as you can see in the `` example.) – alexander Aug 01 '15 at 06:33
  • @alexander: button functionality is also 'press' indication. Do you want that to? If not why not e.g. use css to remove that? – Kukeltje Aug 01 '15 at 06:46
  • Well, I tried it, it didn't work. I used all states (hover,active..etc). Well, with the ` – alexander Aug 01 '15 at 06:59
  • 1
    I just tried in Chrome's developer tool. I managed to replace the button by the image using CSS. My solution is not perfect yet - there are a couple of odd pixels below the image - but it clearly shows the way. I've updated my original answer. – Stephan Rauh Aug 01 '15 at 20:13
  • Perfect! I'm really glad, you could help me out (again and again!). – alexander Aug 03 '15 at 13:43