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):

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