如何将 fontawesome 图标变成可选择的表单输入元素

Question

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

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

换句话说，我希望这些图标取代复选框并像它们一样发挥作用，当它们的选择状态改变时改变它们的颜色。隐藏复选框的显示并为其标签提供背景图像是行不通的，因为我是从 fontawesome 引入图标的。

任何建议都将不胜感激

Answer 1

自定义复选框需要相当多的 CSS，所以这是我找到的最佳解释/示例的链接：https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

在.container .checkmark:after 选择器的样式（即实际的复选标记）上，您将添加content: 样式和您正在使用的fontawesome 图标的CSS 代码。不要忘记添加 font-family: "FontAwesome"; 以便正确渲染。