Proposal - Fixed width for glypicons

[thomaswelton]

The problem…
Before the Glyphicon font file has loaded elements using glypicons have no width defined. Then once the font loads the elements grow and move other items around the page.
This issue is exacerbated when after the elements grow they cause text to go onto new lines.

The proposed fix - Add a defined width of 1em to all :empty glyphicons

Demo of the problem http://9a6c381b6ab68b16ed63-5b5693321d576aeab3f1767c0caf2c60.r44.cf3.rackcdn.com/
Demo of the proposed fix http://9a6c381b6ab68b16ed63-5b5693321d576aeab3f1767c0caf2c60.r44.cf3.rackcdn.com/fix.html

[thomaswelton]

The fact that this is hosted on a CDN doesn't show the problem very well as the fonts are served fast and are cache. But clear your cache before each request and you'll see what first time users will see.
Also would fix issues where the website isn't sending good cache expires headers.

[mdo]

Neato, gang. I like it. Thanks!

[thomaswelton]

Cheers, thanks for 3.0 🍻

[ggam]

Shouldn't we use px instead of em (to ensure IE8 support)?

[thomaswelton]

@ggam no, because then the width other the glyphicon will only be 1px wide. (try it out in chrome dev tools)
By using ems the width of the icon will equaly the font size.

[juthilo]

@ggam IE8 doesn't pick this up anyway, because it doesn't support the :empty selector.

[ggam]

@thomaswelton right, thank you.
@juthilo dind't remember that either.

[Tomas-M]

Please document this at bootstrap website, add examples of empty icon. Thank you

[thomaswelton]

For the use case suggested here we would also need to add a height declaration

glyphicon:empty {
    width: 1em;
    height: 1em;
}

Also, we can't really add an empty icon example to the existing list of icons as it messes up the pretty grid

Shall something be added to the "How to use" section instead?

[thomaswelton]

PR for the height declaration #10329
If anyone wants to give a hint as to how this should be discussed in the docs let me know and I'll add that in too.

[cvrebert]

This was eventually reverted in 2979e4b:

• Removes the width: 1em on .glyphicon because it makes it
  impractical to resize the width of all icons, even if they’re not
  “empty” (e.g., a simple .glyphicon { width: 30px; } wouldn’t work,
  nor would a class preceeded by a parent class.