Bootstrap: icon spacing inside buttons

[waynebrantley]

When icons are included in elements like this:
https://github.com/twitter/bootstrap/issues/1822

The icon is too close to the text. Consider adding a class to pad these. I put this in my css and it seemed to work.

button.btn > i
{
padding-left: 3px;
}

[waynebrantley]

realize it must be tough to vet all these issues, so here is a quick fiddle showing it. (Also, this is true in links or buttons)

http://jsfiddle.net/waynebrantley/tCueB/

[quasipickle]

Shouldn't that be padding-right?
And, no sense specifying the tag when you can just specify the class:

.btn > [class^="icon-"]{ padding-right: 8px)//I like 8px better, but obviously that's subjective.

http://jsfiddle.net/tCueB/4/

[waynebrantley]

We are putting the padding in different places, so could be left, could be right...both of our examples work. However the bootstrap minds want to do it would be great.

[mdo]

Put a space between the <i> tag and your text. No need for additional padding or margin. I've added a mention in the 2.0.2-wip docs to share this detail.

[waynebrantley]

I think the css would be better...but you know best...just do not like 'whitespace' affecting the layout any more than it has to..?

[quasipickle]

Ya, adding a space doesn't seem very CSS-y, nor as exact as one would like.

[waynebrantley]

@markdotto reconsider or you think space is the correct way to go?

[wub]

I reckon a space would be fine, especially if it helps make you reconsider how many glyphicons you're using.

[quasipickle]

Using 1 or 500, the page load time is the same.

[wub]

I'm not talking about page load times.

And no it isn't; due to the extra HTML ;) (Yes, I know it's a negligible difference)

[mdo]

It's a done deal—use a space :).

[rafis]

Space adds negative effect of underline on hover over a link. I want underline only over my text, not over my space. This is case then I want to use icon outside some bootstrap element. I do <span class="glyphicon glyphicon-plus" style="padding-right: 4px;"></span> currently.