Simple Animated Checkboxes with Font Awesome

Font Awesome is a great source for lighweight web icons that can be used in different web interfaces and apps. The icons can be also used to create slick great-looking checkboxes that can be implemented in websites and web applications. Using Font Awesome will provide a great deal of icon options which can be easily added via css.

Here is the Simple Animated Checkboxes solution you can use in your web projects:

Get started:

First, you need to download the entire Font Awesome directory into your project. You can download it from here.
Next, make sure that you include the following code in the head section and adjust the correct path.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

HTML

Create a simple list with the checkboxes you want to include. The following class “.is-checked” gives an active state to the icon checkbox.

<ul class="choice-list">
 <li class="checkbox check is-checked"></li>
 <li class="checkbox heart "></li>
 <li class="checkbox star"></li>
 <li class="checkbox email is-checked"></li>
 <li class="checkbox bell"></li>
 <li class="checkbox map"></li>
 <li class="checkbox wifi is-checked"></li>
 </ul>

CSS

This the css you will need to create the default checkboxes. The animations are included so if you want even simpler checkboxes, you may remove the transitions and transforms.

.checkbox {
 float: left;
 width: 80px;
 height: 80px;
 cursor: pointer;
 -moz-border-radius: 80px;
 -webkit-border-radius: 80px;
 border-radius: 80px;
 display: block;
 background-color: rgba(0, 0, 0, 0.25);
 margin: 20px;
 -moz-transition: all 0.15s cubic-bezier(0.5, 0, 0, 1.5);
 -o-transition: all 0.15s cubic-bezier(0.5, 0, 0, 1.5);
 -webkit-transition: all 0.15s cubic-bezier(0.5, 0, 0, 1.5);
 transition: all 0.15s cubic-bezier(0.5, 0, 0, 1.5);
 }
 .checkbox:hover {
 background-color: rgba(0, 0, 0, 0.5);
 }
 .checkbox:hover:after {
 color: white;
 }
 .checkbox:after {
 line-height: 85px;
 font-family: "FontAwesome";
 display: block;
 content: "";
 color: rgba(255, 255, 255, 0.5);
 text-align: center;
 width: 100%;
 height: 100%;
 -moz-transform: scale(0.5);
 -ms-transform: scale(0.5);
 -webkit-transform: scale(0.5);
 transform: scale(0.5);
 -moz-border-radius: 100%;
 -webkit-border-radius: 100%;
 border-radius: 100%;
 font-size: 54px;
 -moz-transition: all 0.15s cubic-bezier(0.5, 0, 0, 1.5), font-size 0.35s cubic-bezier(0.5, 0, 0, 3);
 -o-transition: all 0.15s cubic-bezier(0.5, 0, 0, 1.5), font-size 0.35s cubic-bezier(0.5, 0, 0, 3);
 -webkit-transition: all 0.15s cubic-bezier(0.5, 0, 0, 1.5), font-size 0.35s cubic-bezier(0.5, 0, 0, 3);
 transition: all 0.15s cubic-bezier(0.5, 0, 0, 1.5), font-size 0.35s cubic-bezier(0.5, 0, 0, 3);
 }
 .checkbox.is-checked:after {
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -webkit-transform: scale(1);
 transform: scale(1);
 font-size: 44px;
 color: white;
 }
 .checkbox.is-checked:hover:after {
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
 }

For every different icon checkbox, you need to create a specific class where you have to include the unicode of the Font Awesome icon:

.check:after {
 content: "\f00c"; /* This is the specific unicode for the icon */
 background-color: rgba(165, 194, 92, 0);
 }
 .check.is-checked:after {
 background-color: #a5c25c; /* Adjust the color of the background for your icons */
 }

For other classes download the code snippet below.

JS

Finally, you need some script to make things work:

Make sure that you include the latest javascript library before the closing </body>

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

You will also need to include the following code:

$('.checkbox').click(function(){
 $(this).toggleClass('is-checked');
 });

You may put it before the library you just included or you can create a separate document and link it to your web project.

That’s it. The animated checkboxes are ready.

DEMO Download Animated Checkboxes