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

InstantCMS 2.X

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

#1 30 мая 2018 в 10:26

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

Не ругайся начальника 😊 может быть и вровень и выпирать...

#2 30 мая 2018 в 13:41

@DimaK1104, в коробке этого нет, к сожалению… Тоже давненько жду, когда будет реализация. Полагаю, как-то можно с помощью CSS реализовать сей вопрос, но это не мой путь )))
Можно попробовать поле заказать, типа "Список иконками", но лучше бы оно в коробке было.

Вкусные цены на NVME Win-сервера, Компоненты для заработка

#3 30 мая 2018 в 14:18

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

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

Спустя какое время...
явка с повинной! — неправильное решение. т.к. иконки будут просто отображаться по порядку, независимо от id значения zst

надо поискать другие варианты

Сегодня в 19:37

#4 30 мая 2018 в 15:24

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

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

Спасибо, завтра попробую, сегодня на работу уехал. Если вопросы будут Мона будет поспрошать что куда 😊?

Не ругайся начальника 😊 может быть и вровень и выпирать...

#5 31 мая 2018 в 12:25

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

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

Вкусные цены на NVME Win-сервера, Компоненты для заработка

#6 31 мая 2018 в 12:48

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

Надо смотреть, что там в коде. Примерно так можно попробовать:

.content_list_item .f_properties ul li[data-option-array-index="6"]:before{
	content:"\f041";
	color:red;
}

где 6 — это номер элемента списка

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

Если надо не просто добавить рядом иконку, а заменить текст на иконку, тогда так:

.content_list_item .f_properties ul li[data-option-array-index="6"]{
	text-indent:-10000px;
	position:relative;
}
.content_list_item .f_properties ul li[data-option-array-index="6"]:before{
	content:"\f041";
	font-family:'FontAwesome';
	padding:5px;
	position:absolute;
	top:0;
	left:0;
	text-indent:0;
}

t.me/googleindexingapi

#7 31 мая 2018 в 13:40

Спасибо ребята, и кто задал вопрос и кто ответил. Как раз нужно именно это, уже хотел сам вопрос оформлять, а тут опа! Буду пробовать.

#8 31 мая 2018 в 13:54

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

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

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

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

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

А если так:

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

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

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

И всё будет работать корректно. И, соответственно, каждый элемент можно оформить персонально, так как у каждого из них есть аттрибут с индексом

t.me/googleindexingapi

#9 31 мая 2018 в 16:46

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

О как, это с какой версии инстанта такое стало из коробки возможным? Просто буквально пару-тройку месяцев назад мне писали такое практически на заказ )))

Вкусные цены на NVME Win-сервера, Компоненты для заработка

#10 31 мая 2018 в 17:51

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

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

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

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

t.me/googleindexingapi

#11 31 мая 2018 в 17:56

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

Не надо — там это не основной задачей было ) Скорее, значит, мне просто показали такую возможность

Вкусные цены на NVME Win-сервера, Компоненты для заработка

#12 31 мая 2018 в 21:14

Добавил предложение на гитхабе

Вкусные цены на NVME Win-сервера, Компоненты для заработка

Шаблон для соцсети с фотогалер

Конструктор тем

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

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

Похожие темы

[ЕСТЬ РЕШЕНИЕ] страница новостей по дефолту выводит плиткой, как заменить на список???

Не отображаются иконки.

Modern иконки шаблонов списка типов контента

Пропали иконки fa fa из меню

[ЕСТЬ РЕШЕНИЕ] Как добавить иконки в виджет Кнопка 1.0.0

[ЕСТЬ РЕШЕНИЕ] Иконка в странице как изменить размер

InstantCMS Team

О проекте

Поддержка

Дополнения