-1

I need to create a form that allows a user to choose their shifts for everyday of the week. For each day there are two options the user can select, day or night, which are represented by fontawesome sun and moon icons, respectively.

How can I use these icons as "checkboxes" which store form input data like a regular form checkbox would?

In other words I want these icons to take the place of checkboxes and function as them, changing their colors when their selection state changes. Hiding the display of the checkboxes and giving their labels a background image won't do since I am bringing the icons in from fontawesome.

Any suggestions would be appreciated

Jennifer Goncalves
  • 1,442
  • 1
  • 12
  • 29
Eric R.
  • 146
  • 2
  • 10
  • 1
    Possible duplicate of [Checkboxes with Font Awesome 5 icons](https://stackoverflow.com/questions/49776701/checkboxes-with-font-awesome-5-icons) – imvain2 Apr 01 '19 at 17:10

1 Answers1

0

Custom checkboxes require a decent bit of CSS so here's a link to the best explanation/example I've found: https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

On the styles for .container .checkmark:after selector which is the actual checkmark, you would add a content: style and the CSS code for the fontawesome icon you're using. Don't forget to add font-family: "FontAwesome"; so it renders properly.

billk
  • 69
  • 4