Как превратить красивые иконки в выбираемые элементы ввода формы

Question

Мне нужно создать форму, которая позволит пользователю выбирать свои смены на каждый день недели.Для каждого дня есть два варианта, которые пользователь может выбрать, день или ночь, которые представлены потрясающими значками солнца и луны, соответственно.

Как я могу использовать эти значки в качестве «флажков», которые хранят входные данные формы, такие какфлажок обычной формы будет?

Другими словами, я хочу, чтобы эти значки заняли место флажков и работали как они, меняя свои цвета при изменении состояния выбора.Скрывать отображение флажков и присваивать им метки фоновое изображение не получится, поскольку я привожу значки из fontawesome.

Будем благодарны за любые предложения

Answer 1

Для пользовательских флажков требуется немножко CSS, поэтому вот ссылка на лучшее объяснение / пример, который я нашел: https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

В стилях селектора .container .checkmark:after, который является действительной галочкой, выдобавит стиль content: и CSS-код для потрясающей иконки, которую вы используете.Не забудьте добавить font-family: "FontAwesome";, чтобы он правильно отображался.