Html 如何将图标转换为可选择的表单输入元素

我需要创建一个表单，允许用户选择一周中每天的班次。对于每一天，用户可以选择两个选项，白天或夜晚，分别由太阳和月亮图标表示

如何使用这些图标作为“复选框”，像常规表单复选框一样存储表单输入数据

换句话说，我想让这些图标取代复选框，在选择状态改变时改变它们的颜色。隐藏复选框的显示并给它们的标签一个背景图像是不行的，因为我是从fontawesome引入图标的

---

如果您有任何建议，我们将不胜感激。

自定义复选框需要一些CSS，因此这里有一个链接，指向我找到的最佳解释/示例：

在

.container.checkmark的样式上：在作为实际选中标记的

选择器之后，您将为正在使用的图标添加一个

内容：

样式和CSS代码。别忘了添加

字体系列：“FontAwesome”以便正确渲染
 可能重复的