How to use Font Awesome for checkboxes etc

Question

I\'m using Font Awesome for icons in my website. I\'m pretty new to HTML & CSS. I was trying to use this for checkboxes, and had hard time in figuring out how I could us

Answer 1

Many of the fancy check box solutions out there have the flaw of removing the original input checkbox in the way that it does not receive input focus.
This is not acceptable for two reasons:

1. You cannot use the keyboard (the Tab-key and spacebar) to navigate to the checkbox and change its value.
2. You cannot apply hover and focused styles on the checkbox.

The solution above by @konsumer is nice but is lacking the input focus ability. However I came across
implementation by @geoffrey_crofte where the input focus works. However it is perhaps not as fancy as @konsumers

So.. I combined those two and put out a plunker example. The only downside to this solution is that you must use a specific html markup for this to work:

The label text

The checkbox must be followed by a label tag. The label tag then can include a span tag including the label text.

I also made it a requirement to use the class fancy-check to the new styles to be applied. This is to avoid the styles destroying other checkboxes in the page that are missing the required, following label tag.

The example is based on using icon fonts, in this case it requires the FontAwesome library.

The stylesheet is here:

/*Move he original checkbox out of the way */
[type="checkbox"].fancy-check {
  position: absolute;
  left: -9999px;
}
/*Align the icon and the label text to same height using tabl-cell display*/
/*If you change the font-size of the text, you may also want to do som padding or alignhment changes here*/
.fancy-check ~ label >  span {
  display: table-cell;
  vertical-align: middle;
  padding-left: 5px;
}
/*The label will contain the icon and the text, will grab the focus*/
[type="checkbox"].fancy-check + label {
  cursor: pointer;
  display: table;
}
/*The icon container, set it to fixed size and font size, the padding is to align the border*/
/*If you change the font-size of this icon, be sure to adjust the min-width as well*/
[type="checkbox"].fancy-check + label:before {
  font-family: 'FontAwesome';
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid transparent;
  font-size: 22px;
  min-width: 28px;
  padding: 2px 0 0 3px;
}
/* toggle font awsome icon*/
[type="checkbox"].fancy-check:checked + label:before {
  content: "\f046";
}
[type="checkbox"].fancy-check:not(:checked) + label:before {
  content: "\f096";    
}
/*Do something on focus, in this case show dashed border*/
[type="checkbox"].fancy-check:focus + label:before {
  border: 1px dashed #777;
}
/*Do something on hover, in this case change the image color*/
[type="checkbox"].fancy-check:hover + label:before {
   color: #67afe5;
}