Why is the font awesome icon blurry?

Question

Browsers

Inserting an icon via pseudo-element from font awesome

.group--has-sub:after {
  font-family: fontawesome;
  content: "\f0c9";
  font-weight: normal;
  display: block;
  position: absolute;
  font-size: 16px;
  top: 14px;
  right: 10px;
}

The icon in Google Chrome looks blurry in Mozzila Firefox looks crisp. What could be the reason and how to solve?
And if you insert an icon like this, it is displayed normally
<i class="fa fa-bars"></i>

Answer 1

1. When using different insertion methods, have you checked if the font sizes are different? This may be the reason. On monitors with resolutions lower than Full HD, elements of different sizes may appear to have different degrees of sharpness.
2. "Cross" garbage in CSS. Try comparing both methods in a blank document with nothing but fontawesome itself. If the results are identical - dig into the original CSS, and reset all parameters for the desired element before installing FA.
Hope it was helpful.

Answer 2

It's about rendering fonts in webkit. You need to use the anti-aliasing function