Значение поля заменить на иконку

InstantCMS 2.X

Как заменить элементы поля список/мультисписок на иконки?

#1 30 мая 2018 в 10:26
Подскажите пошагово каким образом сделать, чтоб элементы поля список/мультисписок показывать не текстом, а иконки
#2 30 мая 2018 в 13:41
@DimaK1104, в коробке этого нет, к сожалению… Тоже давненько жду, когда будет реализация. Полагаю, как-то можно с помощью CSS реализовать сей вопрос, но это не мой путь )))
Можно попробовать поле заказать, типа "Список иконками", но лучше бы оно в коробке было.
#3 30 мая 2018 в 14:18
как вариант для списка записей ( properties — системное имя поля) | используется FontAwesome

  1.  
  2. .content_list_item .f_properties ul li{display:inline-block; width:25px;height:20px;overflow:hidden;}
  3. .content_list_item .f_properties ul li:before{font: normal normal normal 14px/1 FontAwesome; margin:10px}
  4. .content_list_item .f_properties ul li:nth-child(1):before {content:"\f041"; color:red}
  5. .content_list_item .f_properties ul li:nth-child(2):before {content:"\f042"; color:green}
  6. .content_list_item .f_properties ul li:nth-child(3):before {content:"\f043"; color:blue}
  7. .content_list_item .f_properties ul li:nth-child(4):before {content:"\f044"; color:orangered}
  8.  
Спустя какое время...
явка с повинной! — неправильное решение. т.к. иконки будут просто отображаться по порядку, независимо от id значения zst
надо поискать другие варианты
#4 30 мая 2018 в 15:24


как вариант для списка записей ( properties — системное имя поля) | используется FontAwesome

  1.  
  2. .content_list_item .f_properties ul li{display:inline-block; width:25px;height:20px;overflow:hidden;}
  3. .content_list_item .f_properties ul li:before{font: normal normal normal 14px/1 FontAwesome; margin:10px}
  4. .content_list_item .f_properties ul li:nth-child(1):before {content:"\f041"; color:red}
  5. .content_list_item .f_properties ul li:nth-child(2):before {content:"\f042"; color:green}
  6. .content_list_item .f_properties ul li:nth-child(3):before {content:"\f043"; color:blue}
  7. .content_list_item .f_properties ul li:nth-child(4):before {content:"\f044"; color:orangered}
  8.  

Алексей

Спасибо, завтра попробую, сегодня на работу уехал. Если вопросы будут Мона будет поспрошать что куда 😊?
#5 31 мая 2018 в 12:25

неправильное решение. т.к. иконки будут просто отображаться по порядку, независимо от id значения
надо поискать другие варианты

Алексей
Так имеющиеся элементы списка тоже нельзя менять местами и/или удалять первые. При наличии большого количества записей придется все их править под новые реалии (((
#6 31 мая 2018 в 12:48

явка с повинной! — неправильное решение

Алексей
Надо смотреть, что там в коде. Примерно так можно попробовать:
  1. .content_list_item .f_properties ul li[data-option-array-index="6"]:before{
  2. content:"\f041";
  3. color:red;
  4. }
где 6 — это номер элемента списка

1|Фиолетовый кружок
2|Оранжевый звук
6|Красная иконка
3|Громкий цвет



Если надо не просто добавить рядом иконку, а заменить текст на иконку, тогда так:
  1. .content_list_item .f_properties ul li[data-option-array-index="6"]{
  2. text-indent:-10000px;
  3. position:relative;
  4. }
  5. .content_list_item .f_properties ul li[data-option-array-index="6"]:before{
  6. content:"\f041";
  7. font-family:'FontAwesome';
  8. padding:5px;
  9. position:absolute;
  10. top:0;
  11. left:0;
  12. text-indent:0;
  13. }
#7 31 мая 2018 в 13:40
Спасибо ребята, и кто задал вопрос и кто ответил. Как раз нужно именно это, уже хотел сам вопрос оформлять, а тут опа! Буду пробовать.
#8 31 мая 2018 в 13:54

имеющиеся элементы списка тоже нельзя менять местами

AndroS
Если изначально каждому элементу Вы добавили индекс, то можно.

Если в настройках в поле "Значение по-умолчанию" Вы написали так:

Первый вариант
Второй вариант
Третий вариант


Значит нельзя ничего менять, иначе собьется всё.

А если так:

1|Первый вариант
2|Второй вариант
3|Третий вариант


То можно перемещать их в любом порядке, например

1|Первый вариант
3|Третий вариант
2|Второй вариант


И всё будет работать корректно. И, соответственно, каждый элемент можно оформить персонально, так как у каждого из них есть аттрибут с индексом
#9 31 мая 2018 в 16:46

Если изначально каждому элементу Вы добавили индекс

шэльдэ бердэ бельдэ
О как, это с какой версии инстанта такое стало из коробки возможным? Просто буквально пару-тройку месяцев назад мне писали такое практически на заказ )))
#10 31 мая 2018 в 17:51

это с какой версии инстанта такое стало из коробки возможным?

AndroS
Да вроде с самого появления второй ветки)) Я об этом знать не знал, пока добрые люди пару лет назад не подсказали))

буквально пару-тройку месяцев назад мне писали такое практически на заказ

AndroS
Может мы о разных вещах говорим?)) А то сейчас пойдете программиста убивать))))
#11 31 мая 2018 в 17:56

Может мы о разных вещах говорим?)) А то сейчас пойдете программиста убивать))))

шэльдэ бердэ бельдэ
Не надо — там это не основной задачей было ) Скорее, значит, мне просто показали такую возможность
#12 31 мая 2018 в 21:14
Добавил предложение на гитхабе
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.