Bulma: Icons not aligning with text.

[scottzirkel]

Looks like bug from #224 has returned?

Chrome 55
Bulma 0.3.1
Mac w/ Sierra

<p>
    <strong class="is-block">Point of Contact</strong>
    <span class="icon is-small"><i class="fa fa-envelope"></i></span> John Doe
    <br>
    <span class="icon is-small"><i class="fa fa-phone"></i></span> [phone]
    <br>
    <span class="icon is-small"><i class="fa fa-fax"></i></span> [phone]
</p>

[jpincas]

Same here.

[MrBrax]

Started using bulma just a few days ago and this is already a pretty big flaw, if it's not something I've overlooked.

https://github.com/jgthms/bulma/blob/35a488031e8f9db40426d0bffafeee83c5b3ea1a/sass/elements/icon.sass#L6

Why is this a thing?

[jgthms]

The vertical-align: top is there to prevent the .icon element to use more space than its height. Otherwise there's a gap below:

Solution would be to have a modifier class to remove that alignment on some icons.

[amir20]

@jgthms I am guessing I am doing something wrong. But it seems like without vertical-align it looks completely broken.

Settings vertical-align: center makes it better. Not perfect. Is this intended?

[flyingL123]

What's the appropriate way to align icons with text? When I place an icon before some text with no modifications, this is the result?

The image above is from the following code:

<div class="notification is-warning" v-else>
    <span class="icon is-medium">
        <i class="fas fa-2x fa-exclamation-circle"></i>
    </span>
    This is an warning message.
</div>

Adding a vertical-align: middle; to the .icon, helps a little, but still not perfect:

<div class="notification is-warning" v-else>
    <span class="icon is-medium" style="vertical-align:middle;">
        <i class="fas fa-2x fa-exclamation-circle"></i>
    </span>
    This is an warning message.
</div>

What is the appropriate way to accomplish this? Should this be the default behavior rather than having to add css to make it work? If it does require custom code, what is the recommended way to get perfect alignment?

[cyrilchapon]

Any update on this ?

[mewsu]

broken as shit

[BuzzwordChief]

Hey so for everyone who is encountering this issue, you can just change display: inline-flex; from the icon class to display: inline-table; or display: inline-block;. Fixed it for me, just add a bit more margin so that it looks nice.

display: inline-flex;

display: inline-table;

[AriPal]

Any update?

[GopherJ]

Any update ?

[scriptcoded]

See #1858