Fancy select boxes using FontAwesome

See the example on my


The necessary JS and CSS files are included. Two select boxes are added to the main container.

  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src="script.js"></script>
  <link rel="stylesheet" type="text/css" href="">
  <link rel="stylesheet" type="text/css" href="">
  <link rel="stylesheet" type="text/css" href="style.css">
  <div class="container">
    <div class="row">
      <div class="input-group col-md-12">
        <input id="coffee_cb" type="checkbox" class="coffee drink_cb" checked />
        <label for="coffee_cb"></label>
        <input id="wine_cb" type="checkbox" class="wine drink_cb" checked />
        <label for="wine_cb"></label>
    <div class="row">
      <h1>Selected filter</h1>
          <td id="filterValCoffee"></td>
          <td id="filterValWine"></td>


The checkbox itself is hidden and a background using FontAwesome is used instead.

body {
  margin: 30px;

input[type=checkbox] {
  display: none;

input[type=checkbox] + label {
  color: black;
  font-size: 28px;

input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
  width: 50px;
  height: 50px;
  padding: 2px;
  background-color: white;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: black 2px solid;
  margin: 5px;

input[type=checkbox].coffee + label:before {
  content: "\f0f4";

input[type=checkbox].wine + label:before {
  content: "\f000";
input[type=checkbox]:checked + label:before {
  color: white;
  background-color: black;


Retrieve the value of the checkboxes and set the HTML of its corresponding element.

$( document ).ready(function() {

  function setItemValues() {
    $("#coffee_cb").is(":checked") ? coffeeCheck = 'Yes' : coffeeCheck = 'No';
    $("#wine_cb").is(":checked") ? wineCheck = 'Yes' : wineCheck = 'No';

  $('.drink_cb').change(function() {