CSS "line-height"

[pensierinmusica]

Hi,

I noticed that the CSS file generated by "grunt-webfont" contains a general class for the iconfont with a property

{
  line-height: 1;
}

This is causing some weird alignment in my current project, so I'm overriding the property with another rule.

I wonder if there's a precise reason to not keep

{
  line-height: inherit;
}

Or if it's just a minor bug that can be fixed.

Thanks!

[andrewluetgers]

I am also having this problem however changing the line-height property does not solve my problem. To diagnose I made a glyph that was the full height and width of a 512px sqare svg, in Firefox it seems to fit perfectly in Chrome the top of it gets chopped off. Take a look at the green arrow glyph with black background to show the alignment issues, you can see the css should not be a problem.

Perhaps this has something to do with different font formats and how the glyphs are being generated/placed for each?

[er1c]

+1 I'm running into the same issue, I really want it to be "line-height: inherit" or avoid specifying it

[er1c]

My specific problem seems to be from adding font-awesome icons in with other icons.

The "bootstrap" glyphicons do use the line-height:1: https://github.com/twbs/bootstrap/blob/v3-dev/less/glyphicons.less#L29 which is probably why the./tasks/templates/bootstrap.css also has the line-height:1.

However, when mixing in font-awesome icons, their base https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css#L14 doesn't specify the line-height, so it defaults to inherit.

Bootstap v4 completely dropped the glyphicons support (https://v4-alpha.getbootstrap.com/migration/) while referring to 3 libraries:

(upstream) Glyphicons (uses the line-height: 1) Octicons (uses SVG icons) Font Awesome (using the inherit)

So not a whole lot of help there :/

Hmm now I'm having issues with vertical-align: middle vs working with vertical-align: baseline

[er1c]

It's possible the real problem here is the vertical-align: middle (https://www.w3schools.com/cssref/playit.asp?filename=playcss_vertical-align&preval=middle) really interesting example where the alignment of middle really isn't what you want.

For reference, glyphicons in bootstrap does not set vertical-align: https://github.com/twbs/bootstrap/blob/v3-dev/less/glyphicons.less#L22-L32, and the default value is baseline https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align and neither does font-awesome https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css#L14-L21

[er1c]

@andrewluetgers @pensierinmusica @sapegin not sure if you're still using grunt-webfont, but so far it looks like all of my alignment issues are fixed with the just removing the vertical-align: middle neither of the two most popular font-icon libraries have CSS that override the vertical-align - and the default value is baseline I have a PR but not much energy to figure out what the "test" would be for this. I think the reference to glyphicons/font-awesome as not having the attribute should hopefully be enough "proof" to remove it. Thoughts?

[sapegin]

@er1c That’s enough ;-)

[joguerre]

is there a way to avoid 'vertical-align:middle;' from being rendered, by editing 'webfont.js' task, not editing 'bem.css' or 'bootstrap.css'?