added some icons for the toolbar buttons, need to use sprites..

css/styles.css

@@ -4,8 +4,8 @@
 	font-size: 12px;
 	background-color: #111;
 	padding: 10px;
-	opacity: .9;
 	position: fixed !important;
+	opacity: 0.95;
 }
 
 .cb-control.cb-floating {
@@ -52,7 +52,7 @@
 
 #cb-toolbar {
 	top: 0;
-	height: 25px;
+	line-height: 42px;
 	border-top: none;
 	border-left: none;
 	border-right: none;
@@ -63,6 +63,72 @@
 	float: right;
 }
 
+#cb-toolbar button {
+	height: 32px;
+	width: 32px;
+	color: transparent;
+	border: none;
+	background-color: transparent;
+	background-repeat: no-repeat;
+	background-position: center;
+	margin: 0 16px;
+	cursor: pointer;
+}
+
+#cb-toolbar button.cb-close {
+	background-image: url(../img/iconic/white/x_28x28.png);
+}
+
+#cb-toolbar button.cb-close:hover,
+#cb-toolbar button.cb-close:active {
+	background-image: url(../img/iconic/green/x_28x28.png);
+}
+
+#cb-toolbar button.cb-color {
+	background-image: url(../img/iconic/white/cog_alt_32x32.png);
+}
+
+#cb-toolbar button.cb-color:hover,
+#cb-toolbar button.cb-color:active {
+	background-image: url(../img/iconic/green/cog_alt_32x32.png);
+}
+
+#cb-toolbar button.cb-layout {
+	background-image: url(../img/iconic/white/document_fill_32x32.png);
+}
+
+#cb-toolbar button.cb-layout:hover,
+#cb-toolbar button.cb-layout:active {
+	background-image: url(../img/iconic/green/document_fill_32x32.png);
+}
+
+#cb-toolbar button.cb-zoom-out {
+	background-image: url(../img/iconic/white/minus_32x8.png);
+}
+
+#cb-toolbar button.cb-zoom-out:hover,
+#cb-toolbar button.cb-zoom-out:active {
+	background-image: url(../img/iconic/green/minus_32x8.png);
+}
+
+#cb-toolbar button.cb-zoom-in {
+	background-image: url(../img/iconic/white/plus_32x32.png);
+}
+
+#cb-toolbar button.cb-zoom-in:hover,
+#cb-toolbar button.cb-zoom-in:active {
+	background-image: url(../img/iconic/green/plus_32x32.png);
+}
+
+#cb-toolbar button.cb-fit-width {
+	background-image: url(../img/iconic/white/fullscreen_32x32.png);
+}
+
+#cb-toolbar button.cb-fit-width:hover,
+#cb-toolbar button.cb-fit-width:active {
+	background-image: url(../img/iconic/green/fullscreen_32x32.png);
+}
+
 #cb-color {
 	width: 200px;
 	height: 150px;

img/iconic/LICENSE

@@ -0,0 +1,7 @@
+Iconic Icons by PJ Onori 
+
+@somerandomdude
+http://somerandomdude.com/projects/iconic/
+
+http://creativecommons.org/licenses/by-sa/3.0/us/
+http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL

lib/ComicBook.js

@@ -162,14 +162,13 @@ function ComicBook(id, srcs, opts) {
 			.addClass("cb-control")
 			.append(
 				$(document.createElement("button"))
-					.text("X")
+					.addClass("cb-close")
 					.click(function(){
 						ComicBook.prototype.toggleToolbar();
 					})
 			)
 			.append(
 				$(document.createElement("button"))
-					.text("layout")
 					.addClass("cb-layout " + options.displayMode)
 					.click(function(){
 						ComicBook.prototype.toggleLayout();
@@ -177,28 +176,28 @@ function ComicBook(id, srcs, opts) {
 			)
 			.append(
 				$(document.createElement("button"))
-					.text("enhance")
+					.addClass("cb-color")
 					.click(function(){
 						ComicBook.prototype.toggleControl("color");
 					})
 			)
 			.append(
 				$(document.createElement("button"))
-					.text("zoom out")
+					.addClass("cb-zoom-out")
 					.click(function(){
 						ComicBook.prototype.zoom(scale - 0.1);
 					})
 			)
 			.append(
 				$(document.createElement("button"))
-					.text("zoom in")
+					.addClass("cb-zoom-in")
 					.click(function(){
 						ComicBook.prototype.zoom(scale + 0.1);
 					})
 			)
 			.append(
 				$(document.createElement("button"))
-					.text("fit width")
+					.addClass("cb-fit-width")
 					.click(function(){
 						options.zoomMode = "fitWidth"
 						ComicBook.prototype.drawPage();