Font Awesome 7 у DXPR Builder.

DXPR Builder оновлює вбудовані безкоштовні значки Font Awesome з версії 6.7.2 до 7.3.1. Сторінки працюють далі без жодних правок: кожен значок на збереженій сторінці й далі відображається в тому самому розмірі й положенні. Самі значки перемальовано, тож вони виглядають трохи інакше. Ця сторінка показує зміну й перелічує кілька випадків, які потребують перевірки після оновлення.

Що змінюється на ваших сторінках

• Нові дизайни значків. Font Awesome 7 перемальовує свої значки з важчими, округлішими формами. Контурні значки отримують товстіші лінії. Логотипи брендів майже не змінилися.
• Той самий макет. Font Awesome 7 стандартно дає кожному значку фіксовану ширину, що посунуло б вузькі значки праворуч. DXPR Builder зберігає поведінку Font Awesome 6 на своїх сторінках і в редакторі, тож значки зберігають положення й інтервали. Кілька перемальованих значків стали трохи вужчими, наприклад house і truck. Значки з класом fa-fw, як-от посилання на соцмережі, залишаються фіксованої ширини, як раніше.
• Ті самі назви класів. Збережені сторінки зберігають свої класи значків, наприклад fas fa-house. Класи з Font Awesome 4 і 5 працюють далі через стилі сумісності, які досі охоплюють ті самі 464 старі назви.

До і після

Кожна плитка показує один значок двічі. Сірий значок ліворуч це Font Awesome 6.7.2; чорний значок праворуч це Font Awesome 7.3.1.

Нові значки

Засіб вибору значків тепер перелічує 1992 безкоштовні значки проти 1895 раніше.

103 нові значки включають логотипи брендів, як-от Claude, Copilot, Gemini, Fediverse, Codeberg і Forgejo, а також знаки зодіаку.

Перейменовані й вилучені значки

П’ять значків мають нові назви. Сторінки, що використовують старі назви, далі показують значок, бо Font Awesome 7 їх приймає. Засіб вибору значків пропонує лише нові назви.

Один значок залишає безкоштовний набір: vector-square. Font Awesome 7 пропонує його лише в платній редакції Pro, тож сторінка, що використовує fa-vector-square, після оновлення не показує значка. Замініть його безкоштовним значком, наприклад draw-polygon або object-group.

Що залишається незмінним

• Ліцензія. Font Awesome Free зберігає ті самі умови. Значки використовують CC BY 4.0, шрифти SIL OFL 1.1, а код MIT.
• Назви бібліотек. Бібліотека Drupal зберігає свою машинну назву dxpr_builder/elements.font_awesome_6_free, бо на неї посилаються збережені сторінки й власний код. Тепер вона завантажує Font Awesome 7.
• Підтримка браузерів. Font Awesome 7 постачає лише шрифти WOFF2. Кожен браузер, підтримуваний DXPR Builder, читає WOFF2.

Перевірте свій сайт після оновлення

1. Знайдіть у своєму вмісті fa-vector-square і замініть його, як описано вище.
2. Перевірте власний CSS теми, що малює значки Font Awesome сам. Font Awesome 7 перейменовує свої шрифти на «Font Awesome 7 Free» і «Font Awesome 7 Brands». CSS, що задає font-family як «Font Awesome 6 Free» або «Font Awesome 6 Brands» разом із кодовою точкою content, перестає показувати значок. Скористайтеся новими назвами або власними властивостями --fa-family-classic і --fa-family-brands, які надає Font Awesome 7.
3. Перевірте розмітку теми, що покладається на sr-only. Font Awesome 6 визначав клас sr-only, а Font Awesome 7 ні. Текст, який тема ним ховала, стає видимим. Теми Bootstrap 5 можуть натомість скористатися visually-hidden.
4. Перевірте значки теми поза вмістом DXPR Builder. Значки, які ваша тема відображає поза сторінкою DXPR Builder, наприклад у меню або нижньому колонтитулі, наслідують фіксовану ширину Font Awesome 7. Щоб зберегти старі ширини й там, задайте --fa-width: auto на їхньому контейнері.
5. Очистьте кеші. Виконайте drush cr і очистьте кеш CDN або зворотного проксі, щоб відвідувачі отримали нові таблиці стилів і шрифти.

Що далі?

• Бібліотеки значків: набори значків, які постачає DXPR Builder, і як обмежити їх за ролями.
• Додавання значка: розміщуйте й оформлюйте значки на сторінці.
• Оновлення DXPR Builder: безпечно оновіть модуль.
• Журнал змін: що змінюється в кожному релізі.