Download
User Rating: 0/5 ( 0 votes)
faToggle is a jQuery plugin that creates toggling icons with Font Awesome Icons.
Features
-
Create Toggle buttons with font awesome icons
-
Create Radio and checkbox form elements with font awesome icons
-
Assign event handlers for toggle on and off
-
Designed for Font Awesome 4.2.0 and up
Source: phoxoey.com
1. INCLUDE CSS AND JS FILES
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.docs.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/fatoggle.js"></script>
2. HTML
<ul class="fa-ul">
<li><i class="radiodemo"></i>Radio 1</li>
<li><i class="radiodemo"></i>Radio 2</li>
<li><i class="radiodemo"></i>Radio 3</li>
<li><i class="radiodemo"></i>Radio 4</li>
</ul>
3. JAVASCRIPT
// javascript
$('.radiodemo').fatoggle(['fa-circle-o','fa-dot-circle-o'],
{
'radio':true,
'classes':['fa','fa-li'],
'toggleOn':function(e){
$('#radiooutput').html('You selected ' + $(e).parent().text());
},
'toggleOff':function(e){
$('#radiooutput).html('');
}
});
4. OPTIONS
-
radio: (true or false) Font awesome icons used in unordered lists, true will toggle as radio buttons and false allows multiple selections.
-
classes: Array of optional font awesome classes to add to selector. Example would be ['fa-3x'] or ['fa-lg','fa-inverse'].
-
onClasses: Array of optional font awesome classes to be added when in the toggle on state.
-
toggleOn: Function. Called in toggle on state.
-
toggleOff: Function. Called in toggle off state
JS Tutorial
