Simple custom CSS checkboxes using Font Awesome

by Sébastien Lavoie @ Codepen

by CJ Juarez

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h1 class="drinks">DRINKS</h1>
<span class="span_tab"></span>
<ul class="filters">
    <li>
      <label>
        <input type="checkbox" checked>
        <span class="icon"><i class="fa fa-check"></i></span>
        Regular
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox">
        <span class="icon"><i class="fa fa-check"></i></span>
        Large
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox">
        <span class="icon"><i class="fa fa-check"></i></span>
        Jumbo
      </label>
    </li>
  </ul>

CSS

/* Core */

.filters input {
  display: none;
}

.filters .icon {
  text-align: center;
  display: inline-block;
}

.filters .icon .fa {
  visibility: hidden;
}

.filters input:checked + .icon .fa {
  visibility: visible;
}


/* IE8 and lower disabling hack because it does not support the :checked selector */

.filters input {
  display: inline\9;
}

.filters .icon {
  display: none\9;
}


/* Optional */

.filters {
  /* prevent accidental selection when clicking */
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

.filters label {
  cursor: pointer;
}


/* Checkbox styling */

.filters input {
    margin: 0 .1em; /* Use something similar to .icon */
}

.filters .icon {
    background: #fcf4d2;
    border: 1px solid;
    border-color: #cac3a8 #f9f0c2 #f9f0c2 #cac3a8;
    border-radius: .3em;
    text-align: center;
    font-size: .8em;
    color: #666;
    margin: 0 .1em;
    height: 1em;
    width: 1em;
    padding: 0.15em;
    line-height: 1.1em;
    /**
     * Values for height, width and line-height
     * may need to be adjusted depending on your font.
     */
}


/* Inline menu styling */

.filters {
  list-style: none;
  padding: 8px;
  display: inline-block;
}

.filters li {
  display: inline-block;
  margin-right: 0.3em;
}


/* Extra beautify */

/* body {
  background: #fcf4d2;
  font-size: 20px;
  font-family: Verdana, sans-serif;
  text-align: center;
} */

.filters {
  border-radius: 4px;
  box-shadow: 0 0 7px rgba(0,0,0,0.15);
  background: #fff;
}

.drinks {
  display: inline;
  vertical-align: middle;
}

.span_tab {
  padding-left: 2em;
}