Create Toggle Buttons with jQuery and Font Awesome Icons

A jQuery plugin that helps you create interactive, touch-enabled, customizable toggle/push/signal buttons using Font Awesome icons.

How to use it:

1. Load the necessary jQuery library and Font Awesome 4 in your project.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

2. Create an empty DIV element for the toggle button.

<div class="icon" id="demo"></div>

3. Call the function on the DIV element to create a default toggle button.

$('#demo').famultibutton();

4. Customize your toggle button.

$('#demo').famultibutton({

// Array of optional classes to add to selector
classes: ['fa-2x'],

// The background font awesome icon name
backgroundIcon: 'fa-circle',

// The foreground font awesome icon name
icon: 'fa-power-off',

// Color of the foreground in state off
offColor: '#2A2A2A',

// Color of the foreground in state off
offBackgroundColor: '#505050',

// Color of the foreground in state on
onColor: '#2A2A2A',

// Color of the background in state on
onBackgroundColor: '#aa6900',

// Sets the kind of button
mode: 'toggle',  //toggle, push, signal,

// Function called in state on
toggleOn: null,

// Function called in state off
toggleOff: null

});

Change logs:

2015-04-02

• Added a dimmer function

2015-03-06

• Bugfix for 'toggleOff' issue

2015-02-15

• Improved behavior of push button
• Added minified version

---

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