MODX. TV поле с выбором иконки FA, цвета иконки и фона.

Вариант создания поля, в котором можно выбрать цвет и любую из 26+ тысяч иконок Font-Awesome

Данный вариант предназначен для сайтов у которых уже в шаблоне используется FA!

Для этого мы будем использовать 2 пакета:

https://extras.modx.com/package/colorpicker позволит нам создать поле выбора цвета

https://modstore.pro/packages/other/icontv позволит нам создать поле выборка иконки с собственным списком иконок

После установки пакетов создаем свой JSON конфиг для плагина icontv по адресу /core/components/icontv/elements/config/ 

В строке "css": "..." меняем адрес к вашему файлу стилей FA который указан в шаблоне

Пример файла для FA 6.4.0 PRO

Далее при создании TV с типом icontv выбираем наш JSON конфиг в поле "Выберите поддержку иконок"

Пример MIGX поля

MIGX TV advantages-migx JSON формы
[
  {
    "caption": "Иконки",
    "fields": [
      {
        "field": "title",
        "caption": "Заголовок",
        "inputTVtype": "text"
      },
      {
        "field": "text",
        "caption": "Описание",
        "inputTVtype": "textarea"
      },
      {
        "field": "color_bg",
        "caption": "Цвет фона",
        "inputTV": "colorpicker"
      },
      {
        "field": "color_icon",
        "caption": "Цвет иконки",
        "inputTV": "colorpicker"
      },
      {
        "field": "icon_class",
        "caption": "Класс иконки (FA PRO 6.4.0 https://fontawesome.com/search например: fa-regular fa-star)",
        "inputTVtype": "text"
      },
      {
        "field": "icontv",
        "caption": "ИЛИ выберите иконку из списка (в поиске)",
        "inputTV": "icontv"
      }
    ]
  }
]
MIGX TV advantages-migx JSON колонки
[{
  "header": "Заголовок",
  "dataIndex": "title",
  "sortable": "true"
},{
  "header": "Описание",
  "dataIndex": "text",
  "sortable": "true"
},{
  "header": "Цвет фона",
  "dataIndex": "color_bg",
  "sortable": "true"
},{
  "header": "Цвет иконки",
  "dataIndex": "color_icon",
  "sortable": "true"
},{
  "header": "Иконка",
  "dataIndex": "icon_class",
  "sortable": "true"
},{
  "header": "Иконка",
  "dataIndex": "icontv",
  "sortable": "true"
}]
Чанк advantages-migx.tpl
<li class="advantages__item item-advantages">
    <div class="item-advantages__icon" style="background-color: [[+color_bg]];">
        <i class="[[+icon_class:default=`[[+icontv]]`]]" style="color: [[+color_icon]];"></i>
    </div>
    <div class="item-advantages__title">[[+title]]</div>
    <p>[[+text]]</p>
</li>

В данном случае  "inputTV": "icontv" и "inputTV": "icontv" это названия отдельных полей которых мы используем в своем MIGX, не тип поля, а название существующего поля