Bulma: Font Awesome icon(s) doesn't have enough space in a button

[csk157]

<a class="button">
  <i class="fa fa-object-ungroup"></i> fa-object-ungroup
</a>

[ncksllvn]

I agree that this seems off but the following HTML will give you the expected result:

    <a class="button">
        <span class="icon is-small">
            <i class="fa fa-object-ungroup"></i>
        </span> 
        fa-object-ungroup
    </a>

[csk157]

Thanks! It does look better :smile:

[jgthms]

This is tricky one. Because most icons will look good:

But @ncksllvn has provided a very good solution.

[mnpenner]

This is still rendering improperly for me...

<button class="button"><span class="icon"><i class="fa fa-plus"></i></span><!-- react-text: 73 --> Add Instruction<!-- /react-text --></button>

Even if I make the button small (<span class="icon is-small">):

[thomhickey]

button > svg {
    margin-right: 8px;
}

your mileage may vary :)

[mclaudt]

@mnpenner, solution is to wrap your anonymous text block in span:
```html


Add Instruction

[wrabit]

@mclaudt not working for me