font awesome checkboxes for acp

public/less/admin/admin.less

@@ -16,6 +16,7 @@
 
 @import "./modules/alerts";
 @import "./modules/selectable";
+@import "./modules/checkboxes";
 
 .admin {
 	padding-top: 70px;

public/less/admin/general/dashboard.less

@@ -132,16 +132,4 @@
 	.motd textarea {
 		width: 100%;
 	}
-
-	#toggle-realtime {
-		text-align: center;
-		.fa {
-			font-size: 21px;
-			vertical-align: -2px;
-		}
-
-		.fa-toggle-on {
-			color: @brand-success;
-		}
-	}
 }

public/less/admin/modules/checkboxes.less

@@ -0,0 +1,22 @@
+[type=checkbox] {
+	display: none;
+}
+
+label {
+	cursor: pointer;
+}
+
+.checkbox label {
+	padding-left: 2px;
+}
+
+.admin {
+	.fa-toggle-on, .fa-toggle-off {
+		font-size: 21px;
+		vertical-align: -3px;
+	}
+
+	.fa-toggle-on {
+		color: @brand-success;
+	}
+}

public/src/admin/admin.js

@@ -1,5 +1,5 @@
 "use strict";
-/*global define, socket, app, ajaxify, utils, Mousetrap, Hammer, RELATIVE_PATH*/
+/*global define, socket, app, ajaxify, utils, bootbox, Mousetrap, Hammer, RELATIVE_PATH*/
 
 (function() {
 	$(document).ready(function() {
@@ -20,6 +20,7 @@
 			selectMenuItem(data.url);
 			setupHeaderMenu();
 			setupRestartLinks();
+			setupCheckboxes();
 		});
 
 		$('[component="logout"]').on('click', app.logout);
@@ -168,4 +169,26 @@
 			});
 		});
 	}
+
+	function setupCheckboxes() {
+		$('[type=checkbox]').each(function() {
+			var checkbox = $(this),
+				checked = checkbox.is(':checked');
+
+			if (checked) {
+				checkbox.after('<i class="fa fa-toggle-on"></i>');
+			} 
+			else {
+				checkbox.after('<i class="fa fa-toggle-off"></i>');   
+			}
+		});
+
+		$('[type=checkbox]').change(function() {
+			var checked = $(this).is(':checked');
+
+			$(this).siblings('[class*=fa-]').toggleClass('fa-toggle-off', !checked)
+				.toggleClass('fa-toggle-on', checked);
+		});
+	}
+
 }());