Font Awesome CSS checkbox with empty label

I am trying to get CSS only radio and checkbox buttons using FontAwesome. I have a jsfiddle here.

I am using the following CSS which works well, when the checkbox has a label with content. i am now trying to just create a matrix of checkboxes in a table on my page and the icons appear OK but cannot be clicked / changed state.

My CSS:

/**
 * Checkboxes
 */


input[type=checkbox] {
  display: none;
}


/* to hide the checkbox itself */

input[type=checkbox] + label:before {
  display: inline-block;
  letter-spacing: 5px;
  content: "\f0c8";
  font-family: 'Font Awesome 5 Pro';
}


/* unchecked icon */

input[type=checkbox]:checked + label:before {
  content: "\f14a";
  letter-spacing: 5px;
}


/**
 * Radio buttons
 */

input[type=radio] {
  display: none;
}


/* to hide the radio itself */

input[type=radio] + label:before {
  display: inline-block;
  letter-spacing: 5px;
  content: "\f111";
  font-family: 'Font Awesome 5 Pro';
}


/* unchecked icon */

input[type=radio]:checked + label:before {
  content: "\f192";
  letter-spacing: 5px;
}

input[type=checkbox] + label:hover,
input[type=radio] + label:hover {
  cursor: pointer;
}

My HTML:

<div>
  <i class="fas fa-square"></i> SAMPLE UNCHECKED
  <br/>
  <i class="fas fa-check-square"></i> SAMPLE CHECKED
  <br/>
  <br/>
  <br/>
  <input name="access_chk[]" class="access_chk" type="checkbox" checked>
  <label for="access_chk[]"></label>
  <br/>
  <input name="access_chk[]" class="access_chk" type="checkbox" checked>
  <label for="access_chk[]"></label>
  <br/>
  <input name="access_chk[]" class="access_chk" type="checkbox" checked>
  <label for="access_chk[]"></label>
</div>