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.

Simple Animated Checkboxes with Font Awesome

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:

Related post:  VenoBox - Just another responsive jQuery lightbox plugin

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

Divi WordPress Theme

You may also like...

4 Responses

  1. Robert McIntosh says:

    why use JS to add the class “is-checked” when you could use css pseudo “::checked”?

  2. designify says:

    Yep, that’s another option. 🙂 Thanks for visiting.

  3. Bill says:

    This looks really cool, but they’re not really checkboxes and/or radio buttons that you can actually use in a html form. How about some CSS to style those?

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close