Font Awesome weird colors in the background

Question

I'm using Font Awesome and it works perfect but in Chrome the icons show a strange "border". In IE and Firefox the problem does not appear. It's also strange that the problem appears in chrome just if i have a zoom of 100% (so the normal view). If I zoom in a little bit, for example 110%, it's displayed totally correctly.

A Screenshot to describe the problem:

In Chrome


In IE, FF

Some code:

<div class="col-lg-4 col-xl-2 col-md-4 col-sm-2 col-xs-2 no-padding text-center social-github">
  <a href="">
    <i class="fa fa-github-square fa-2x"></i>
  </a>
</div>

.social-github > a {
    color: #fff;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    -ms-transition: all .1s linear;
    transition: all .1s linear;
}

.social-github > a:hover {
    color: #000;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    -ms-transition: all .1s linear;
    transition: all .1s linear;
}

Answer 1

It seems to be a to Chrome and Windows related problem with rendering some fonts.

The easiest way to fix the problems seems to be to move the svg src in the CSS file in front of the WOFF but after the EOT to still maintain a propper display in IE but to force chrome to use SVG instead of the WOFF.

Here's for example the min version of font awesome with the changed order

@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.0.3');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype');

Better use this instead the code above: With this little trick you can detect Chrome and prevent the download of the WOFF font:

@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.0.3'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } }

Answer 2

after setting width of the container to auto , the issue doesn't exist anymore , try using exact size units ( pixels .. etc ) instead of em.

Edit :

think the font size is controlled via using class fa , using the fa-1x also fixed it.