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

Question

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

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

换句话说，我希望这些图标代替复选框并发挥其作用，并在其选择状态更改时更改其颜色。隐藏复选框的显示并为其标签赋予背景图片将不会，因为我是从fontawesome中引入图标的。

任何建议将不胜感激

Answer 1

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

在.container .checkmark:after选择器的样式上（这是实际的选中标记），您将为您使用的fontawesome图标添加content:样式和CSS代码。不要忘记添加font-family: "FontAwesome";，以使其正确呈现。