html - font-weight on vector icons breaks elements alignment -




i have div containing vector icon (in example, fontawesome icon).

the icon horizontally aligned right , expect on edge of container (the div). works expected can see here (you'll have zoom lot)

https://jsfiddle.net/k0h56myn/

where icon , bottom border start @ same x coordinate (the red line show perfect pixel alignment):

wow

adding font-weight: 700; style icon breaks alignment, see below:

:(

i assume font-weight "expand" icon n pixels, not caring @ of object repositioning , alignment.. right?

do have trick prevent in order have perfect , ocd-approved alignment?

there no position (alignement) changed here. act normal fonts. while adding font weight, font become bold. text fonts only. not issue.





wiki

Comments

Popular posts from this blog

Asterisk AGI Python Script to Dialplan does not work -

python - Read npy file directly from S3 StreamingBody -

kotlin - Out-projected type in generic interface prohibits the use of metod with generic parameter -