FortAwesome / Font-Awesome

The iconic SVG, font, and CSS toolkit
https://fontawesome.com
Other
73.53k stars 12.2k forks source link

Icons are misplaced in contexts with non-zero text-indent values #8945

Open crisperdue opened 8 years ago

crisperdue commented 8 years ago

Using Font Awesome version 4.5.0 and Chrome 49.0.2623.110 (64-bit).

FA uses display: inline-block for icons, but this inherits text-indent values from enclosing tags.

See http://jsfiddle.net/crisperdue/1o0bbhgc/4/ for illustration and a workaround.

My suggestion is to include "text-indent: 0" in the definition of the "fa" class to positively set the text-indent for icons to 0.

crisperdue commented 7 years ago

See http://jsfiddle.net/1o0bbhgc/ for updated version of illustration.

tagliala commented 7 years ago

Added to 5.0.0 milestone and assigned to Dave. Thanks for reporting this

tagliala commented 6 years ago

This is still an issue on FA 5.0.1:

https://jsfiddle.net/tagliala/tgzouajm/22/

domind commented 4 years ago

Believe this PR should close this issue