Search code examples
cssfont-awesomefont-awesome-5font-awesome-4

FontAwesome icons looks pixelated/blurred

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:
enter image description here

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;
}
Solution

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

    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.