JSFiddle - React, Tailwind, and code Playground

by Skaiman

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<h1>Свои чекбоксы с Font Awesome</h1>
<div>
  <input id="box1" type="checkbox" />
    <label for="box1">Первый пункт</label>
  <input id="box2" type="checkbox" />
    <label for="box2">Второй пункт</label>
  <input id="box3" type="checkbox" />
    <label for="box3">Третий пункт</label>
</div>

CSS

/*** basic styles ***/

@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=latin,cyrillic);

body {
  background: url(http://cdn.backgroundhost.com/backgrounds/subtlepatterns/darkdenim3.png);
  font-family: 'PT Sans Narrow', sans-serif;
  color: #ECF0F1;
  margin: 30px; 
}

h1 { 
  font-size: 1.5em; 
}

label {
  display: block;
  font-size: 20px; 
}

div { 
  margin-left: 20px;
}

/*** custom checkboxes ***/

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

input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
  margin: 0 10px;   
}

input[type=checkbox] + label:before { 
  content: "\f096"; 
}

input[type=checkbox]:checked + label:before { 
  content: "\f046";
}