Я видел эту проблему «значки FontAwesome выглядят пиксельными / размытыми» несколько раз в stackoverflow или их github, но ни одно из решений для меня не сработало. Вот пример:
https://plnkr.co/edit/CmviS7TuPcIJX20G?preview
В трех верхних элементах списка используется Font-Awesome для создания «необычного флажка», а в трех нижних элементах списка используется обычный радиус границы. (и несколько преобразованных прямоугольников для формирования флажка ... неоптимально).
Нижние 3 элемента списка border-radius кажутся мне намного лучше, чем 3 верхних элемента FontAwesome (но в используемой нами структуре форм используется Font-Awesome так что надеюсь исправить это простым CSS исправлением). Я проверил последнюю версию Chrome / Firefox / Edge / Opera (в Window7) ...
Три верхних элемента списка, в которых используется Font-Awesome, выглядят немного неровными во всех браузерах (особенно в основном белом кружке). К нему прилагается пи c:
Я использую FontAwesome 4.3, но похоже, что у людей были такие же проблемы и в Font-Awesome 5 ( полагаю, что я попробовал и этот файл FontAwesome 5, но безрезультатно). правило font-face css в файле font-awesome. css (я пробовал это локально на своем компьютере, но это не сработало).
добавление чего-то вроде «-webkit-font-smoothing: antialiased;» добавление временной трансформации к элементу флажка, например «transform: rotateZ (0.5);» используйте размер шрифта, кратный 12 или 14 или 16 пикселей (в зависимости от версии Font-Awesome с использованием). В этом примере я использовал 14 пикселей, так как это, кажется, базовый размер шрифта для .fa.
Открыт для предложений попробовать, спасибо!
Придется опубликовать код, если Я связываюсь с plunkr, поэтому вот основной CSS для элементов Font-Awesome:
.has-font-awesome li:before {
font-family: FontAwesome;
font-size: 48px;
content: '\f111';
color: white;
position: absolute;
top: 0px;
left: 0px;
}
.has-font-awesome li:after {
font-family: FontAwesome;
font-size: 36px;
content: '\f00c';
color: black;
position: absolute;
top: 7px;
left: 3px;
}