Font awesome icons не всегда отображаются в последней версии Google Chrome 32.0.1700.76 m

Я использую последний Google Chrome. Как только он был выпущен, я заметил, что некоторые из значков шрифта не отображаются правильно. Вместо этого я просто вижу квадратную коробку. Это не меняется даже после загрузки всей страницы, и я жду одну минуту. Когда я нависаю над ними, появляются значки.

Это можно увидеть, перейдя по следующему URL-адресу:

http://fontawesome.io/icons/

Кто-нибудь еще замечает это. Я предполагаю, что это влияет на всех, у кого есть новый браузер. Обратите внимание, что в один прекрасный день он работает и показывает их все, на следующий день появляются некоторые иконки, которых я не вижу. Может быть, это проблема времени. У меня довольно медленная связь.

Ответ 1

Кажется, что проблема связана с некоторыми расширениями chrome. В моем случае я отключил Adblock Plus и теперь отображаются все значки.

Ответ 2

Кажется, это ошибка с использованием Chrome на компьютере с Windows. Измените порядок форматов шрифтов на вашем шрифте @font-face, чтобы WOFF был помещен перед TTF и SVG.

Шрифты SVG лучше отображаются в браузерах, которые их поддерживают. Поэтому вы должны поместить их по умолчанию.

Ответ 3

Я видел иконки в некоторых браузерах и машинах, но не на других. Попробовав перемещение разметки вокруг, убедитесь, что классы fa fa-* были в каждом теге i, и подтверждение html5shiv.js было включено в конец DOM, я просто изменил CSS, чтобы использовать CDN, и он работал. Это улучшило меня с версии 4.1 до 4.2.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

Ответ 4

В случае проблем с иконками вы можете добавить следующий код в файл .htaccess или файл index.php.

<FilesMatch ".(ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Ответ 5

place !important

[class^="fi-"], [class*=" fi-"] {
    font-style: normal;
    font-family: foundation-icons !important;
    -webkit-font-smoothing: antialiased;
}