В этом посте речь пойдет о частой проблеме отображения Font Awesome в Firefox и/или Internet Explorer. Font Awesome — это замечательный и простой способ поставить красивые векторные иконки себе на сайт или блог, и всячески изменять их отображение посредством CSS.
Пользователи WordPress чаще всего подключают этот способ установки иконок посредством плагинов, особенно актуален Font Awesome в оформлении меню. Для этого существуют специальные плагины, например Font Awesome 4 Menus, который едва ли не единственный постоянно обновляющийся.
Проблема может возникнуть на некоторых сайтах и темах, тогда вместо стандартных значков от Font Awesome — отображаются квадратики с кодами. Этот баг может отображаться только на Firefox, а может и на IE и других браузерах. Причины этого бага самые разнообразные — от неправильной настройки .htaccess до проблем с оптимизаторами CSS.
Если выискивать проблему у вас нет ни времени ни желания — могу предложить самый простой вариант решения бага. Для этого нужно всего навсего добавить в <head> сайта следующую строчку:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
Как найти <head> в WordPress?
Чтобы вставить вышеуказанную строчку в <head> в WordPress — его нужно сначала найти. Обычно это можно сделать через встроенный редактор WordPress, редактируя header.php, или посредством FTP-клиента.
В папке вашей текущей темы (путь обычно такой — vash.sait/wp-content/themes/vasha-tema) найдите файл header.php и откройте его любым текстовым редактором, между тегами <head></head> просто вставьте строчку и Font Awesome заработает на всех браузерах.
Решение костыльное. Во первых — это жёсткий хардкод определённой версии FA и если плагин его использующий будет юзать иную версию, могут быть косяки, например определённые иконки не будут отображаться. При удаление плагинов с FA, эта строчка обязательно забудется и каждый раз будут загружены ненужные ресурсы. Так же загрузка происходит с внешнего ресурса, что негативно влияет на скорость загрузки сайта и вызывает дополнительную перерисовку, когда шрифт будет загружен, еще возможен вариант, что он не загрузится и отображение сайта будет поломано. Я считаю, что стилевые ресурсы должны хоститься там же, где расположен сайт.
Полностью согласен, Василий. Это жутко костыльный, но в то же время быстрый способ уйти от проблемы для чайников и тех, у кого выискивать проблему нет ни времени ни желания.
Мне довелось применить этот способ лишь единожды и результат меня удовлетворил. Вес подгружаемого файла из быстрого CDN-сервера составляет лишь 5,2 кБ, что на одном из моих сайтов с очень дешевым хостингом увеличило время загрузки всего лишь на 0,1 сек (https://www.dropbox.com/s/k5v4pwjm59ygvuv/css-load.png).
Что касается возможных проблем с версиями, то v3.2.1 уже официально не поддерживается и данный пример актуален для современной 4.x версии шрифта, которая тоже со временем устареет. Так что поставив себя на место технически не подкованного владельца сайта, я скорее выбрал бы такое костыльное решение проблемы, чем коды значков вместо картинок на своем сайте.
Все таки я считаю, что стоит найти время на поиск истинной проблемы, чем потом, когда начнутся проблемы с несовместимостью, вспоминать что же я такого накостылил. А по поводу веса — 5кб это только css, в котором линкуются другие ресурсы, они то по весу и есть наиболее ощутимые.
А мне надо в переводимую игру вставить редкие спецсимволы. Файл отф в шрифтах на пк не даёт вообще ничего, тогда как я просто могу скопировать и вставить это: ← → ↑ ↓ ☺ — и главное работает. А вот это: ≅ ↺ ℃ ↯ ≬ ⋆ работает почему-то только у вас тут, а мне надо все узды в руки и оффлайн. Пожалуйста, мастера :/ , прервите поскорей мои поисковые мучения… kamino.85@mail.ru
А мне помогло. Быстро решил проблему, потом можно детально поковыряться. Спасибо!
А в моем случае этот вариант не сработал. Я нашел такой, который работает:
Если значки Font Awesome отображаются как квадратики, просто добавьте следующий фрагмент кода в ваш файл стилей:
@import url(«https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css»);