Minimalist ON/OFF Switch With jQuery And FontAwesome - toggle-onoff

File Size: 2.18 KB
Views Total: 5880
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimalist ON/OFF Switch With jQuery And FontAwesome - toggle-onoff

toggle-onoff is a dead simple jQuery plugin for creating a toggle switch that uses Font Awesome for the on/off icons.

How to use it:

1. Load the required Font Awesome iconic font in the head section of the html document.

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

2. Create the on/off switch from a hidden input as this:

<div class="input toggle-onoff" unselectable="on">
  <input type="hidden" name="onoff" class="" value="True">
  <i class="fa" aria-hidden="true"></i>
</div>

3. Load jQuery library and the JavaScript file toggle-onoff.js at the end of the document. That's it.

<script src="//code.jquery.com/jquery-3.2.0.slim.min.js"></script>
<script src="toggle-onoff.js"></script>

This awesome jQuery plugin is developed by wachawo. For more Advanced Usages, please check the demo page or visit the official website.