Шрифт (шрифтовые иконки) Awesome не отображаются в Firefox: Решение проблемы

Если вы используете шрифтовые иконки Awesome, то вы наверно замечали такую проблему, иконки шрифтов не появляется в Firefox, они не отображаются из-за того, что вы пользуетесь услугами сервисов CDN.

Дело вот в чем, когда мы используем какую-любую сеть доставки контента, то содержимое вашего ресурса не обслуживаются непосредственно от первоначального сервера, он подается с другого домена, это vashcdn.domen.ru (который является маскирующим названием другого домена).

Шрифт  Awesome не отображаются  в Firefox

Фактически такого рода проблемы возникают из-за взаимной проблемы разделения ресурса или в краткой форме CORS (Cross-origin resource sharing).

Поэтому вопрос заключается в том, что нужно сделать, чтобы решить/устранить эту проблему, так как это может нанести ущерб удивительному внешнему виду вашего сайта или сервиса. Итак, продолжайте читать, чтобы окончательно решить проблему с отображением Awesome шрифта.

В чем конкретная проблема шрифтов Awesome

CORS является защитной мерой, и это помогает предотвратить прямой или косвенный доступ к другим файлам сервера. Это в свою очередь помогает предотвратить атаку хакеров и других неадекватных людей от попыток взлома или возможностей повредить какое-либо другое содержание и данные.

В чем конкретная проблема шрифтов Awesome

Смотрите, когда мы пользуемся любой услугой сервисов CDN то наш контент (содержимое сайта) не обслуживается непосредственно от нашего хостинг сервера, материалы подаются с десятка других серверов. Так что можно сказать, что когда ваш сайт начинает загружать какую-либо таблицу стилей, вызывая иконки шрифтов, запрос отправляется на сервер, который сейчас обрабатывается ваш CDN (сеть доставки контента) и теперь уже ваш CDN сервер пытается вызвать директорию Awesome шрифта для отображения необходимых данных. Но веб-браузер тоже получает запроса запрещающий его обрабатывать/скачивать. Вот собственно этим и вызвана проблема.

Вы, возможно, замечали, что значки/иконки в браузере в Google Chrome отображаться правильно, но совершенно не работают в Firefox и Internet Explorer. Поскольку Гугл Хром не подчиняется таким запросам, но вот другие веб-браузеры обрабатывают такой запрос.

Решение проблемы отображения шрифта Awesome

Я более часа сканировал страницу поиска в Google, чтобы найти идеальное решение этой проблемы. И наконец, получил свой ??ответ с официальной страницы поддержки maxcdn.

Вот пример файла .htaccess. Если вы внимательно пересмотрите его строка за строкой, то вы найдете решение проблемы.

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

Вы должны просто скопировать точный фрагмент кода в .htaccess файл своего веб-сайта. Следуйте шагам, приведенным ниже, чтобы все сделать правильно.

  • Перейдите на свой веб-хостинг.
  • Войдите в свою cPanel панель управления.
  • Перейдите в менеджер файлов.
  • Перейдите в папку Public HTML.

Теперь остается воспользоваться кодом выше, отредактируйте .htaccess файл и вставить код на самый верх. Теперь просто сохранить его, обновите страницу, очистить весь кэш, если вы пользуетесь какими-либо плагинами для кэширования. Также очистите кэш своего CDN сервера.

Теперь перезагрузите сайт, и вы увидите, что шрифтовые иконки Awesome отображаются в браузере в Firefox.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>