FontAwesome icons looks pixelated/blurred

Question

I've seen this 'FontAwesome icons looks pixelated/blurred' issue various times on stackoverflow or their github but none of the solutions worked out for me. Here is an example:
https://plnkr.co/edit/CmviS7TuPcIJX20G?preview

The top 3 list items use Font-Awesome to create a 'fancy checkbox' while bottom 3 list items use a regular border-radius (and some transformed rectangles to form the checkbox... not optimal).
The bottom 3 border-radius list-items looks much better to me than the top 3 FontAwesome ones (but the form framework we using uses Font-Awesome so hoping to just fix it with some simple CSS fix). I checked latest version of Chrome/Firefox/Edge/Opera (on Window7)...
The top 3 list-items which use Font-Awesome look a bit jagged on all browsers (especially the main white circle). Attached is a pic:

I'm using FontAwesome 4.3 but seems like people had the same type of issues in Font-Awesome 5 as well (believe I tried that FontAwesome 5 file as well to no avail).

Things I've tried which seen on other posts:

put the SVG font file higher up in the @font-face css rule in the font-awesome.css file (i tried that locally on my computer but that didn't work).
adding something like "-webkit-font-smoothing: antialiased;"
adding a temporary tranform onto the checkbox item like "transform:rotateZ(0.5);"
use a font-size in a multiple of 12px or 14px or 16px (depending on which version of Font-Awesome using). For this example, I used 14px since that seems to be the base font-size for .fa.

Open to suggestions to try, Thanks!

Have to post some code if I am linking to a plunkr so here is the main CSS for the Font-Awesome items:

.has-font-awesome li:before {  
  font-family: FontAwesome;
  font-size: 48px;
  content: '\f111';
  color: white;


  position: absolute;
  top: 0px;
  left: 0px;
}
.has-font-awesome li:after {  
  font-family: FontAwesome;
  font-size: 36px;
  content: '\f00c';
  color: black;

  position: absolute;
  top: 7px;
  left: 3px;
}

idk if it's your case, but i had the same issue a month ago because i was importing font awesome library twice with 2 different versions — Alberto Sinigaglia, Jun 18 '20 at 23:28
@Berto99 dont think thats the issue... My plunker example is just importing the FontAwesome css file once. — armyofda12mnkeys, Jun 18 '20 at 23:31
yes but is can see perfectly your example, there is no aliasing going on, check this image https://ibb.co/cF5pf7n — Alberto Sinigaglia, Jun 18 '20 at 23:38
Interesting... not sure why it would only affect my 2 laptops and not yours. Which version of Chrome are you viewing in? Im on Version 83.0.4103.61 (Official Build) (64-bit) on Windows7. — armyofda12mnkeys, Jun 19 '20 at 00:09
Looks smooth on my side (Chrome 83 on Mac) no matter the zoom level. — Jens, Jun 19 '20 at 00:26
huh interesting. well i guess its a Windows specific issue... I am going to turn on 'ClearType' and restart my computer and see if it helps. — armyofda12mnkeys, Jun 19 '20 at 04:37
interesting after turning on Windows ClearType and restarting my computer, it shows up perfect. Maybe i'll answer my own question :) — armyofda12mnkeys, Jun 19 '20 at 04:44

score 0 · Accepted Answer · answered Jun 19 '20 at 04:46

After enabling Windows ClearType, and restarting computer then the FontAwesome icons look as crystal clear as the border-radius icon:

Looks great on all 4 browsers now.
Apparently "ClearType is enabled by default in Windows 7, 8, and 10".
So maybe i turned it off.

FontAwesome icons looks pixelated/blurred

1 Answers1