[Suggestion] Improve tag > icon spacing

[timacdonald]

Change the spacing of an icon when in a tag - similar to icon in a button.

Currently, if you have a button with an icon in it, for example:

<a class="button">
    <span class="icon is-small">
        <i class="fa fa-user"></I>
    </span>
    <span>Profile</span>
</a>

The icon has margin applied to it to make it sit nicer and more balanced within the button. I propose doing the same thing for a tag:

<div class="tag">
    <span class="icon is-small">
        <i class="fa fa-user"></I>
    </span>
    <span>Profile</span>
</div>

It is much more subtle with a tag, but I still think its a nicer look. I duplicated the button > icon spacing and it seemed to actually work really well, so I just left it.

Tradeoffs

None I can think of.

Testing Done

Example: https://codepen.io/timacdonald/pen/qXZxwB

[jgthms]

I like that idea. But how would it work with different combinations of tag size and icon size?

[timacdonald]

@jgthms I've updated the codepen with further examples. The ones at the top are pretty controlled, but the bottom examples are weird mixes. I personally feel its better across the board: https://codepen.io/timacdonald/pen/qXZxwB

[Francismori7]

One thing @timacdonald, unrelated. I love the big icon in the small tag, really nice effect. #steals-idea

[timacdonald]

haha, yea I know right. To be honest, I was thinking, oh I should try some of these that would break things...then I was also like, "I actually really like that" haha.