CODEWITHSUNDEEP
cssfont-awesome
cyberwombat
cyberwombat

Reputation: 40134

Using FontAwesome as css pseudo background results in blurry icons

I would like to use FontAwesome icons as css backgrounds. However the end result is a blurry, or rather, fattened icon. I have tried a few things like font-smoothing etc but no luck. How can I make css background icons look as sharp as when used inline html?

<h5>With CSS:before background</h5>
<a href="#" class="back"></a>
<h5>With icon in DOM</h5>
<a href="#" class=""><i class="fa fa-youtube fa-white fa-2x"></i></a>

<style>
a {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  background-color: black;
  color: white;
}
a.back:before {
  content: "\f167";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size: 30px;
  line-height: 30px;
  position: absolute;
  text-align: center;
  width: 30px;

}
</style>

Here's a fiddle: http://jsfiddle.net/cyberwombat/kdta4zak/

Also attached a shot. Results are the same in FF, Chrome and Safari. enter image description here

Upvotes: 0

Views: 949

Answers (2)

cyberwombat
cyberwombat

Reputation: 40134

Ok - more playing with font smoothing solved it for all 3 browsers.

-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;

Evidently this may be an issue with only some people - perhaps font setting on computer. I am on OSX 10.10.3.

Upvotes: 1

Shaggy
Shaggy

Reputation: 6796

It looks OK to me in all browsers. However, I was able to improve it slightly by explicitly setting the text-decoration of the pseudo-element to "none", rather than the "inherit" you are using.

Upvotes: 1

Related Questions