Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does fa-rotate-90 icons appear blurry in Chrome?

This image is a screenshot from Font Awesome examples

blurry 90 & 270

On my screen (and I even rotated in Paint to make sure it really was blurry and not just some magic) the 90 and 270 degree rotations appear blurry. The vertical and horizontal flips are fine. My question is why? What is it about either Chrome, or the Font Awesome mechanism that causes this to happen?

Naturally, thing are much worse in IE 9

IE loves rendering

like image 588
Wayne Werner Avatar asked Jan 28 '14 16:01

Wayne Werner


1 Answers

The font-awesome CSS define a CSS rule that causes this issue.

.fa {
    line-height: 1;
}

After removing this rule, the icon display very well.

like image 59
guli Avatar answered Sep 24 '22 23:09

guli