Привязка для обновления Font Awesome с 5.0.6 до 5.8.1, получаются пустые квадраты

Где-то на моем сайте есть папки:

  • (...) / font-awesome / 5.0.6 / css /
  • (...) / font-awesome / 5.0.6 / webfonts /
  • (...) / font-awesome / 5.8.1 / css /
  • (...) / font-awesome / 5.8.1 / webfonts /

Если я включу файл font-awesome/5.0.6/css/fontawesome-all.min.css, Font Awesome будет работать.

Если я включу файл font-awesome/5.8.1/css/fontawesome.min.css, Font Awesome покажет пустые квадраты вместо значков.

Скорее всего, это не из-за кеша, поскольку я очистил кеш браузера и файлы кеша .css.

Я помню, что раньше при интеграции Font Awesome на веб-сайт мне приходилось вручную изменять некоторые относительные URL-адреса внутри библиотеки, но это, если я хорошо помню, было с Font Awesome 4.

Однако я чувствую, что пропускаю какой-то этап установки, который я просто не могу вспомнить, так как он был «так давно».


css font-awesome font-awesome-5
person TTT    schedule 24.03.2019    source источник
comment
Иногда при обновлении font awesome мне приходится обновлять свой CSS, чтобы он соответствовал последней версии. Когда мы изменили версию, которую использовали в офисе, я изменил font-family: fontAwesome на font-family: Font Awesome Pro 5. Ваша версия может быть другой   -  person jeh    schedule 24.03.2019

Ответы (3)


arrow_upward
1
arrow_downward

Учитывая последнее примечание к выпуску (https://fontawesome.com/changelog/latest), есть несколько больших изменения, сделанные с 5.0 до 5.8:

Берегись! В этом выпуске есть критические изменения

В последней версии мы исправили некоторые проблемы с использованием файлов шрифтов OTF и TTF в мобильных проектах. Название, толщина шрифта и версия были изменены, чтобы сделать их более совместимыми и стабильными в будущем.

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

Возможно, вам нужно будет перейти по ссылкам там, чтобы исправить свои проблемы:

https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started#install-ligatures

Я также советую вам медленно обновляться до более низкой версии, потому что на самом деле вы переходите на версию 7, и будет трудно понять реальную проблему. Так что начните переходить на 5.1, затем на 5.2 и так далее, пока не обнаружите, какая версия является виноватой.

https://github.com/FortAwesome/Font-Awesome/releases

Перейдите по этой ссылке для получения дополнительных сведений об обновлении между версиями: https://github.com/FortAwesome/Font-Awesome/blob/master/UPGRADING.md

person Temani Afif    schedule 24.03.2019
comment
Я проверил всю страницу обновления ... Я вижу вещи, которые не должны иметь никакого влияния, и вещи, которые я просто не понимаю, к чему они относятся и, похоже, не имеют отношения к тому, как я когда-либо использовал Font Awesome ... например , Я не использую TypeScript, я не использую Angular, я использую SVG, мне никогда не нужно было устанавливать шрифты ... Я обычно просто включал файлы FA в свой проект, называемый некоторым CSS (в котором я только необходимо исправить некоторые пути), и он работал. - person TTT; 25.03.2019
comment
@TTT вы пробовали обновляться медленно? протестируйте с 5.1 и 5.2 ... чтобы узнать, является ли это общая проблема или проблема, связанная с версией - person Temani Afif; 25.03.2019
comment
Я только что поискал ссылку для загрузки версии 5.1 (или других версий) минуту назад ... не нашел. - person TTT; 25.03.2019
comment
Спасибо. Пробовал версию 5.1.0 (непрофессиональная). Та же проблема. (Тем не менее, я не понимаю, относится ли журнал изменений к моему использованию.) - person TTT; 25.03.2019
comment
@TTT, можете ли вы использовать jsfiddle.net, чтобы поместить туда весь свой код CSS / HTML? и рассмотрим включение cdn, давайте попробуем посмотреть, как выглядит ваш код - person Temani Afif; 25.03.2019
comment
Я нашел проблему. Это связано с тем, как построен мой сайт / приложение. Я скоро выложу решение. - person TTT; 25.03.2019

arrow_upward
1
arrow_downward

Вы загружаете файл .zip вместо одного файла all.min.css? В противном случае загрузите файл .zip, распакуйте его и свяжите основной файл CSS внутри заголовка.

С другой стороны, вы можете использовать ссылку CDN, которую они предоставляют.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Оба работают отлично.

person Fatema T. Zuhora    schedule 24.03.2019
comment
Я уже загрузил полный .zip. Я попытался создать ссылку на fontawesome.min.css (который, как я ожидал, будет основным файлом), и теперь я попытался связать all.min.css, но у меня возникла та же проблема. Я пробовал CDN и столкнулся с той же проблемой. И в долгосрочной перспективе я не хочу использовать CDN. - person TTT; 24.03.2019
comment
Вместо использования fontawesome.min.css файла используйте all.min.css или all.css - person Fatema T. Zuhora; 24.03.2019
comment
Похоже, что сами шрифты не скачиваются. У меня такая же проблема. - person Erik Philips; 03.06.2019

arrow_upward
0
arrow_downward

Я обнаружил, в чем была проблема, она характерна для моего сайта / приложения. Я минимизирую большинство своих файлов .css с помощью библиотеки php, а затем объединяю их, используя самодельную библиотеку (только вторая библиотека самодельная). Затем, поскольку результирующий файл .css находится в другом месте, ссылки на веб-шрифты не работают, это был шаг, о котором я забыл: вместо этого сделать все относительные ссылки ../webfont полуотносительными. Теперь все работает отлично.

person TTT    schedule 24.03.2019