title: Font Awesome CSS checkbox with empty label
body: <p>I am trying to get CSS only radio and checkbox buttons using FontAwesome. I have a <a href="http://jsfiddle.net/TheRealPapa/d0do7sff/" rel="nofollow noreferrer">jsfiddle here</a>.</p>
  
  <p>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.</p>
  
  <p>My CSS:</p>
  
  <pre><code>/**
   * 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;
  }
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div&gt;
    &lt;i class="fas fa-square"&gt;&lt;/i&gt; SAMPLE UNCHECKED
    &lt;br/&gt;
    &lt;i class="fas fa-check-square"&gt;&lt;/i&gt; SAMPLE CHECKED
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;br/&gt;
    &lt;input name="access_chk[]" class="access_chk" type="checkbox" checked&gt;
    &lt;label for="access_chk[]"&gt;&lt;/label&gt;
    &lt;br/&gt;
    &lt;input name="access_chk[]" class="access_chk" type="checkbox" checked&gt;
    &lt;label for="access_chk[]"&gt;&lt;/label&gt;
    &lt;br/&gt;
    &lt;input name="access_chk[]" class="access_chk" type="checkbox" checked&gt;
    &lt;label for="access_chk[]"&gt;&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>