title: Checkboxes with Font Awesome 5 icons
body: <p>Did anyone already designed checkboxes with font awesome 5 icons inside?</p>
  
  <p>I've already googled it and found only examples for FA-4 like <a href="http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/" rel="noreferrer">http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/</a> </p>
  
  <p>I updated to FA5 and got other things with CSS pseudo elements to run, but inside a checkbox it's not running. I'm open to other solutions without pseudo elements.</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>Fiddle-Examples:</strong></p>
  
  <p><a href="https://jsfiddle.net/SUBMarkus/rgggo3xx/24/" rel="noreferrer">Fiddle with FA-4.7</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Checkboxes */
  
  .checkbox input[type="checkbox"] {
    display: none;
  }
  
  .checkbox label {
    padding-left: 0;
  }
  
  .checkbox label:before {
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: bottom;
    margin-right: 10px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    font-family: "FontAwesome";
  }
  
  .checkbox input[type="checkbox"]:checked+label::before {
    content: "\f00c";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  
  &lt;div class="checkbox"&gt;
    &lt;input type="checkbox" id="profile_notifications" value="" checked/&gt;
    &lt;label for="profile_notifications"&gt;
      I agree
    &lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/mx9snt2k/1/" rel="noreferrer">Fiddle with FA-5</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Checkboxes */
  
  .checkbox {
    padding-left: 10px;
    padding-top: 10px;
  }
  
  .checkbox input[type="checkbox"] {
    display: none;
  }
  
  .checkbox label {
    padding-left: 0;
  }
  
  .checkbox label:before {
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: bottom;
    margin-right: 10px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    font-family: "Font Awesome 5 Solid";
    
  }
  
  .checkbox input[type="checkbox"]:checked+label::before {
    font-family: "Font Awesome 5 Solid";
    content: "\f00c";
  }
  
  .test {
    padding-left: 10px;
    padding-top: 10px;
  }
  .test .pseudo-element:before {
    display: none;
    font-family: "Font Awesome 5 Solid";
    content: "\f00c";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script&gt;
      window.FontAwesomeConfig = {
      searchPseudoElements: true
    }
  &lt;/script&gt;
  
  &lt;div class="checkbox"&gt;
    &lt;input type="checkbox" id="profile_notifications" value="" checked/&gt;
    &lt;label for="profile_notifications"&gt;
      Doesn't work!
    &lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="test"&gt;
    &lt;label class="pseudo-element"&gt;This works!&lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>