--- url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%B1%D1%96%D0%B1%D0%BB%D1%96%D0%BE%D1%82%D0%B5%D0%BA%D0%B8-%D0%BF%D1%96%D0%BA%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D0%BC' title: 'Бібліотеки піктограм | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T20:00:03+00:00' updated: '2026-10-24T20:08:10+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Вибір піктограм в елементах Icon і Circle counter пропонує кожен набір піктограм, зареєстрований на вашому сайті. DXPR Builder постачає 14 наборів; модулі та теми можуть додати більше файлом YAML. Ця сторінка перелічує вбудовані набори, пояснює, як вони завантажуються, і показує вам, як додати один. Щоб обмежити набори, які бачить роль, використайте профіль конструктора; див.' tags: - 'Match your brand' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T20:08:10+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Бібліотеки піктограм' description: 'Вибір піктограм в елементах Icon і Circle counter пропонує кожен набір піктограм, зареєстрований на вашому сайті. DXPR Builder постачає 14 наборів; модулі та теми можуть додати більше файлом YAML. Ця сторінка перелічує вбудовані набори, пояснює, як вони завантажуються, і показує вам, як додати один. Щоб обмежити набори, які бачить роль, використайте профіль конструктора; див.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T20:00:03+0000' dateModified: '2026-10-24T20:08:10+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%B1%D1%96%D0%B1%D0%BB%D1%96%D0%BE%D1%82%D0%B5%D0%BA%D0%B8-%D0%BF%D1%96%D0%BA%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D0%BC' articleSection: 'Адаптація під бренд' - '@type': WebPage '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%B1%D1%96%D0%B1%D0%BB%D1%96%D0%BE%D1%82%D0%B5%D0%BA%D0%B8-%D0%BF%D1%96%D0%BA%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D0%BC' description: 'Вибір піктограм в елементах Icon і Circle counter пропонує кожен набір піктограм, зареєстрований на вашому сайті. DXPR Builder постачає 14 наборів; модулі та теми можуть додати більше файлом YAML. Ця сторінка перелічує вбудовані набори, пояснює, як вони завантажуються, і показує вам, як додати один. Щоб обмежити набори, які бачить роль, використайте профіль конструктора; див.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/uk' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: uk --- [Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Керування сайтом](/uk/hc/documentation/learn-dxpr-builder/manage) /[Адаптація під бренд](/uk/hc/documentation/learn-dxpr-builder/customization) # Бібліотеки піктограм. Вивчення DXPR BuilderКерування сайтомАдаптація під бренд ## In this guide Related guides - [Власні набори піктограм](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0/%D0%BD%D0%B0%D0%B1%D0%BE%D1%80%D0%B8-%D0%BF%D1%96%D0%BA%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D0%BC) - [Додавання значка](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%B7%D0%BD%D0%B0%D1%87%D0%BE%D0%BA) Вибір піктограм в елементах **Icon** і **Circle counter** пропонує кожен набір піктограм, зареєстрований на вашому сайті. DXPR Builder постачає 14 наборів; модулі та теми можуть додати більше файлом YAML. Ця сторінка перелічує вбудовані набори, пояснює, як вони завантажуються, і показує вам, як додати один. Щоб обмежити набори, які бачить роль, використайте профіль конструктора; див. [Профілі користувачів](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B0%D0%B4%D0%BC%D1%96%D0%BD%D1%96%D1%81%D1%82%D1%80%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%BF%D1%80%D0%BE%D1%84%D1%96%D0%BB%D1%96-%D0%BA%D0%BE%D1%80%D0%B8%D1%81%D1%82%D1%83%D0%B2%D0%B0%D1%87%D1%96%D0%B2). ## Вбудовані набори піктограм Набори зареєстровано в `dxpr_builder.dxpr_icon_sets.yml`: | Ключ | Мітка у виборі | Префікс класу | Бібліотека | |---|---|---|---| | `bi` | Bootstrap Icons | `bi` | `dxpr_builder/elements.bootstrap_icons` | | `et` | ET Line Icons | `et` | `dxpr_builder/elements.et_line_font` | | `fab` | Font Awesome Free Brands | `fab` | `dxpr_builder/elements.font_awesome_6_free` | | `far` | Font Awesome Free Regular | `far` | `dxpr_builder/elements.font_awesome_6_free` | | `fas` | Font Awesome Free Solid | `fas` | `dxpr_builder/elements.font_awesome_6_free` | | `glyphicon` | Glyphicon Halflings | `glyphicon` | `dxpr_builder/elements.glyphicons_halflings` | | `pe` | Pixeden Line Icons | `pe` | `dxpr_builder/elements.pe_icon_7_stroke` | | `ph` | Phosphor Icons Regular | `ph` | `dxpr_builder/elements.phosphor_icons` | | `ph_bold` | Phosphor Icons Bold | `ph-bold` | `dxpr_builder/elements.phosphor_icons_bold` | | `ph_duotone` | Phosphor Icons Duotone | `ph-duotone` | `dxpr_builder/elements.phosphor_icons_duotone` | | `ph_fill` | Phosphor Icons Fill | `ph-fill` | `dxpr_builder/elements.phosphor_icons_fill` | | `ph_light` | Phosphor Icons Light | `ph-light` | `dxpr_builder/elements.phosphor_icons_light` | | `ph_thin` | Phosphor Icons Thin | `ph-thin` | `dxpr_builder/elements.phosphor_icons_thin` | | `fa` | Font Awesome (v4 compatibility) | `fa` | `dxpr_builder/elements.font_awesome_6_free` | Вибір не пропонує набір `fa`, бо він не має списку піктограм. Він змушує піктограми, збережені зі старим класом `fa`, завантажувати бібліотеку Font Awesome. Сторінки, збережені зі старими іменами бібліотек Font Awesome, також отримують таблицю стилів `dxpr_builder/elements.font_awesome_v4_shims`, тож їхні піктограми продовжують показуватися. Усі набори Font Awesome завантажують Font Awesome Free 7. Бібліотека зберігає машинне ім’я версії 6, бо збережені сторінки та власний код посилаються на нього. Що змінилося, перелічує сторінка [Font Awesome 7 у DXPR Builder](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%87%D0%B0%D1%82%D0%BE%D0%BA-%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D0%B8/font-awesome-7). ## Як вибір і сторінки завантажують піктограми Спадний список наборів починається з **All icon sets**, потім перелічує кожен зареєстрований набір, який має список піктограм. 13 вбудованих наборів, крім `fa`, мають вбудовані списки, тож сайт лише з DXPR Builder показує 14 записів. Набір з іншого модуля або теми потребує списку `icons` у своєму YAML, щоб з’явитися. Коли редактор вибирає піктограму, елемент зберігає класи піктограми, як-от `bi bi-star`, та ім’я її бібліотеки. Відвідувачі потім завантажують лише шрифти піктограм, які використовує їхня сторінка. У редакторі ET Line, Pixeden і Glyphicon завантажуються з самим редактором; вибір завантажує таблиці стилів інших наборів, коли відкривається. Як редактори вибирають і стилізують піктограму, наведено на сторінці [Додавання піктограми](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%B7%D0%BD%D0%B0%D1%87%D0%BE%D0%BA). ## Обмеження наборів піктограм для кожної ролі Кожен профіль конструктора має групу **Icon sets** із полем на набір і полем **Check/Uncheck all Icon sets**. Налаштуйте її в **DXPR Studio** > **DXPR Builder** > **User Profiles**; кроки має сторінка [Профілі користувачів](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B0%D0%B4%D0%BC%D1%96%D0%BD%D1%96%D1%81%D1%82%D1%80%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%BF%D1%80%D0%BE%D1%84%D1%96%D0%BB%D1%96-%D0%BA%D0%BE%D1%80%D0%B8%D1%81%D1%82%D1%83%D0%B2%D0%B0%D1%87%D1%96%D0%B2). Як поводиться група: - З позначеним **Check/Uncheck all Icon sets** роль бачить кожен набір, включно з наборами, доданими пізніше. - Зі знятою позначкою роль бачить лише позначені набори. Новий профіль починається так, з кожним набором позначеним, тож доданий пізніше набір лишається прихованим, доки ви його не позначите. - Зі знятою позначкою і без позначених наборів вибір порожній. - Піктограми, які вже є на сторінці, продовжують показуватися. Профіль змінює лише те, що пропонує вибір. ## Додавання набору піктограм Набір піктограм це запис YAML плюс бібліотека Drupal. DXPR Builder читає `*.dxpr_icon_sets.yml` з кожного встановленого модуля та теми. Довідник властивостей і хук alter наведено на сторінці [Власні набори піктограм](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0/%D0%BD%D0%B0%D0%B1%D0%BE%D1%80%D0%B8-%D0%BF%D1%96%D0%BA%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D0%BC). 1. Створіть `mymodule/mymodule.dxpr_icon_sets.yml`: ```yaml brand: label: 'Brand icons' prefix: brand css: css/brand-icons.css library: mymodule/brand_icons icons: - 'brand brand-logo' - 'brand brand-arrow' ``` `css` відносний до теки модуля й завантажується в редакторі. Кожна піктограма це префікс плюс клас, що починається з префікса та дефіса. 2. Заявіть бібліотеку в `mymodule.libraries.yml`. Сторінки відвідувачів її завантажують: ```yaml brand_icons: css: theme: css/brand-icons.css: {} ``` 3. Очистьте кеші через `drush cr`. 4. Позначте новий набір у кожному профілі конструктора, який не має позначеного **Check/Uncheck all Icon sets**. 5. Відкрийте налаштування елемента **Icon** і виберіть **Brand icons** у спадному списку наборів. Власний модуль також може вилучити набір із вибору хуком alter; код наведено в [Довіднику Hooks API](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0/%D1%85%D1%83%D0%BA%D0%B8-api#hook_dxpr_builder_icon_sets_alter). Піктограми з вбудованого набору все одно продовжують завантажуватися на збережених сторінках. Піктограми з вилученого власного набору припиняють завантажувати свій CSS, бо DXPR Builder приєднує лише бібліотеку, яку називає зареєстрований набір. ## Якщо набору піктограм бракує - **Нового набору немає у спадному списку.** Його YAML не має списку `icons`, або кеш досі тримає старий реєстр. Додайте список і виконайте `drush cr`. - **Набору бракує лише деяким редакторам.** Їхній профіль конструктора його не позначає. Позначте його в **Icon sets** за шляхом `/admin/dxpr_studio/dxpr_builder/profile`. - **Піктограми показуються в редакторі, але не відвідувачам.** Редактор завантажує файл `css` набору, але сторінки відвідувачів завантажують його `library`. Переконайтеся, що `library` називає бібліотеку в `mymodule.libraries.yml`, яка містить файл CSS. ## Що далі? - [Власні набори піктограм](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0/%D0%BD%D0%B0%D0%B1%D0%BE%D1%80%D0%B8-%D0%BF%D1%96%D0%BA%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D0%BC): довідник властивостей YAML і хук alter. - [Додавання піктограми](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%B7%D0%BD%D0%B0%D1%87%D0%BE%D0%BA): налаштування елемента Icon.