Bulma: [0.6.2] Rounded single-icon buttons are not circular

[CaptainFalcon92]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma 0.6.2

Description

Hello there ! I know Bulma is already overwhelmed with issues trying to change it into Bootstrap, however there is a little unwanted behavior with the 0.6.2.
Not a big deal, easily fixed. But anyway i recon one would know it's there.

I'm quoting the Button documentation page down here:

If the button only contains an icon, Bulma will make sure the button remains square, no matter the size of the button or of the icon.

I wanted to combined modifiers .is-rounded with .is-outlined so i get nice social buttons.
However button.is-rounded adds some padding to the button, making not circular. Too bad :)

.button.is-rounded {
    // [...]
    padding-left: 1em;
    padding-right: 1em;
}

Steps to Reproduce

<a class="button is-rounded is-outlined">
    <span class="icon">
        <i class="icon-facebook"></i>
    </span>
</a>

<a class="button is-rounded is-outlined">
    <span class="icon">
        <i class="icon-twitter"></i>
    </span>
</a>

<a class="button is-rounded is-outlined">
    <span class="icon">
        <i class="icon-google"></i>
    </span>
</a>

Expected behavior

According to the doc, buttons shall remain square
Expectation

Actual behavior

But there are inevitably slightly fat
Reality

Possible solution

You might want to consider removing the padding ?
Cannot really be done on this exact situation without the css4 “$” rule ^^
Definitely a minor detail but still this is somewhat a "defect".

With love from Paris.

[Wikiki]

Hi,

Maybe by adding a new is-icon-button modifier (or something like this) ?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[karolsw3]

Can we open it again?

[service-paradis]

I would also like the button to be circular if there is only a single icon. Voting to reopen this issue as well.
What do you think @jgthms ?

[iplanwebsites]

Definitely a common UI pattern missing from Bulma.

[zecka]

Yea this is issue should be reopen :/

[ddelrio1986]

I created my own class that is called "is-circular" like so:

.is-circular { border-radius: 50%; }

Add that to an icon button to make it a circle.

[laradojo]

Hey guys!

I discovered a way, in the code use button class="button button-is-rounded". For the CSS just need to put border-radius: 50%.

[CaptainFalcon92]

That's pretty basic css but yes thanks people. The question is not how to hack it but that it should be fixed in native Bulma.