Почему иконка font awesome размытая?

Question

[TheLostRoot]

Вставляю иконку через псевдоэлемент из шрифта 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;
}

Иконка в Google Chrome выглядит размытой в Mozzila Firefox выглядит четкой. В чем может причина и как решать?
А если вставить иконку так то отображается нормально
<i class="fa fa-bars"></i>

Comments

[Максим Софронов]

скрин?

Answer 1

[Deleted Deleted]

1. При использовании разных способов вставки, Вы проверяли, не отличаются ли размеры шрифта? Это может быть причиной. На мониторах с разрешением ниже Full HD элементы разных размеров могут казаться разной степени резкости.
2. "Перекрёстный" мусор в CSS. Попробуйте сравнить оба метода в чистом документе, где нет ничего, кроме самого fontawesome. Если результаты будут идентичными - копайтесь в оригинальных CSS, а для нужного элемента перед установкой FA сбросьте все параметры.

Надеюсь, был полезен.

Answer 2

[Alexander Tartmin]

Дело в рендеринге шрифтов в webkit. Вам нужно использовать функцию антиальясинга