css - 使用 FontAwesome 作为 css 伪背景会导致图标模糊

Question

我想使用 FontAwesome 图标作为 css 背景。然而，最终结果是一个模糊的，或者更确切地说，是发胖的图标。我尝试了一些方法，例如字体平滑等，但没有成功。如何使 css 背景图标看起来像使用内联 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>

这是一个 fiddle :http://jsfiddle.net/cyberwombat/kdta4zak/

还附上一张截图。结果在 FF、Chrome 和 Safari 中是相同的。

Answer 1

我在所有浏览器中看起来都不错。但是，我可以通过将伪元素的 text-decoration 显式设置为“无”而不是您正在使用的“继承”来稍微改进它。